React：多个异步状态更新

Question

我正在写下面的例子。他的目标是在React状态所包含的数组中异步添加条目。

我的问题是我的回调错误擦除了先前的值，而不是添加它们...

我的可运行示例在此处可用：https://codesandbox.io/s/nostalgic-kirch-7rtup?fontsize=14&hidenavigation=1&theme=dark

如何获得预期的结果？

谢谢

Answer 1

问题

由于所有状态更新都在同一渲染周期内排队，因此您将覆盖每个排队的状态更新。您还正在使用数组:: push来改变状态。

const callback = (newValue) => {
  const newState = clone(state);
  newState.myValue.push(newValue); // <-- state mutation!
  setState(newState);
};

const exe = () => {
  setTimeout(() => callback("b"), 1000); // <-- all updates from current state!
  setTimeout(() => callback("c"), 2000);
  setTimeout(() => callback("d"), 3000);
};

解决方案

使用功能状态更新来从先前状态正确更新。

const callback = (newValue) => {
  setState(state => ({
    ...state, // <-- copy existing state
    myValue: [...state.myValue, newValue], // <-- copy array and append new value
  }));
};