Question

我具有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>

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

Answer 1

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

由于react-hooks中的状态更新程序功能未返回承诺，因此它可能会起作用，也可能不会起作用。类组件中的setState函数也是如此

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

Answer 2

setState 可以接受回调函数，以在状态变量更新后执行任何操作。

很遗憾， useState 没有回调功能。在函数内部，无论您使用多少异步/等待，它总是在最后执行。

这就是为什么 useEffect 可以救援的原因。您需要在useEffect中调用您的php后端（deleteCartItem）。

是的，使用异步/等待最好只限于Promises。

我已经尝试过了。您可以自己看看。

https://codesandbox.io/s/async-await-not-working-on-states-from-usestates-of-react-99i41

异步等待未处理来自React的useState的状态

2 个答案: