Question

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

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

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

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

Here's a demo：尝试单击连续的每个按钮，最后，某些按钮（可能）仍会加载。

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

Answer 1

对于async operations，您需要使用更新程序功能来使用以前的状态。

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

在这里oldState是！= previousState。

useState与React中的异步操作冲突

1 个答案: