useState 与 React 中的异步操作冲突

Question

在带有useState钩子的 React 功能组件中，我不知道如何运行多个异步操作而不会对最终结果产生冲突。如果初始状态是一个对象并且每个异步操作都对给定的键执行更改，则可以使用扩展运算符来设置新状态。例子：const [oldState, setNewState] = React.useState({ /* something */ });const asyncOperation = async () => {   await somethingAsync();   setNewState({      ...oldState,      key: 'newValue',   });};当更多这些操作同时运行时，问题就出现了：oldState使用的期间setNewState可能会在另一个异步函数结束时改变，但是当最后一个异步操作执行他的时候，状态的一些更新可能会丢失，setNewState因为引用oldState可以指向到旧版本的变量。这是一个演示：尝试单击一行中的每个按钮，最后，其中一些（可能）会导致仍在加载。如何在不留下反应钩子的情况下避免这个问题？

Answer 1

对于异步操作，您需要使用更新程序功能利用先前的状态。

setNewState((previousState) => ({

  ...previousState,

  key: 'newValue',

}));

在这里，oldState是 != previousState。