useState 与 React 中的异步操作冲突

Question

在带有useState钩子的 React 功能组件中，我不知道如何在不对最终结果产生冲突的情况下运行多个异步操作。

如果初始状态是一个对象，并且每个异步操作都对给定键执行更改，则可以使用 spread 运算符来设置新状态。例：

const [oldState, setNewState] = React.useState({ /* something */ });
const asyncOperation = async () => {
await somethingAsync();
setNewState({
...oldState,
key: 'newValue',
});
};

当更多这些操作同时运行时，就会出现问题：setNewState期间使用的oldState可能会在另一个异步函数结束时更改，但是当最后一个异步操作执行他的setNewState时，状态的某些更新可能会丢失，因为对oldState的引用可以指向变量的旧版本。

这是一个演示：尝试单击一行中的每个按钮，最后，其中一些按钮(可能(仍然加载。

如何在不留下反应钩子的情况下避免此问题？

Answer 1

对于异步操作，您需要使用更新程序函数使用以前的状态。

setNewState((previousState) => ({
...previousState,
key: 'newValue',
}));

在这里，oldState是 ！=previousState。