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。