javascript - Async Await 不适用于 React useStates 的状态

标签 javascript reactjs

我有一个 onClick 函数来删除项目。 当用户单击该按钮时,将向该项目分配状态 deletedItem。 这是代码:

<button 
  type="button" class="btn btn-sm btn-black white-text"
  data-toggle="tooltip" data-placement="top" title="Remove item"
  onClick={ 
    async () => {
      await setDeletedItem(item.name);
      console.log(deletedItem);
      deleteCartItem()
    }
  }>x</button>

但是单击按钮后状态不会立即更改。这是一值延迟,这使得我要删除的项目如此不准确。我还有其他 async/await 函数,并使用类在同一个 React 中设置状态,但它们工作得很好。这有什么问题或者如何解决这个问题吗?

最佳答案

为了使async-await语法正常工作,您需要将它们与返回promise的函数一起使用。

由于来自react-hooks的状态更新函数不返回promise,所以它可能工作也可能不工作。类组件中的setState函数也是如此

这里的解决方案是利用在状态更改时运行的 useEffect,您可以在此方法中调用响应状态更改所需调用的任何函数

关于javascript - Async Await 不适用于 React useStates 的状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60595506/

相关文章:

javascript - 使用 React Navigation 访问 Redux 状态

javascript - HTML 创建 onsubmit 重定向

javascript - Durandal 尝试从 viewmodel 文件夹访问 View

javascript - 电话验证上的正则表达式不起作用 - javascript

javascript - 如何在 React 应用程序中隐藏 reCaptcha-v2 SITE_KEY

javascript - 当用户登录时,必须显示注销按钮,但不会立即显示。为什么会发生这种情况?

javascript - Material UI 循环进度内的文本

javascript - 正则表达式将 & 转换为 &

javascript - 如何使用发布请求打开新选项卡?

mysql - React 提交到 Flask POST 方法不写入数据库(使用 Axios)