Async Await 不能处理来自 React 的 useStates 的状态答案

【问题标题】：Async Await not working on states from useStates of ReactAsync Await 不能处理来自 React 的 useStates 的状态
【发布时间】：2020-03-09 06:16:54
【问题描述】：

我有一个 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 中设置状态，但它们工作正常。这有什么问题或如何解决这个问题？

【问题讨论】：

当您使用依赖于前一个状态的 setState 时，您必须使用第二种形式的 setState。 reactjs.org/docs/…
我不认为 deletedItem 依赖于先前的状态，因为它只会被分配给单击项目的名称，不是吗？ @boosted_duck

标签： javascript reactjs

【解决方案1】：

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

由于来自 react-hooks 的状态更新器函数不返回承诺，它可能会或可能不会工作。类组件中的 setState 函数也是如此

这里的解决方案是利用在状态变化时运行的useEffect，你可以在这个方法中调用任何你需要调用的函数来响应状态变化

【讨论】：

我明白你的意思，但是这个变量赋值在 map 内，我根据用户选择设置一个状态，并且只有当用户点击它时。 {items.map(item => {item.name} {item.price} <button onClick={setSelectedItem(item.name)}} 所以，我就是这样做的，状态赋值不能只是超出map 的范围。还是有更好的方法来做到这一点？我需要将 selectedItem 的名称返回给 php 后端，以便它知道要删除哪个项目。 @Shubham Khatri

【解决方案2】：

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

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

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

是的，async/await 的使用最好仅限于 Promises。

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

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

【讨论】：