Javascript 反应：多个异步状态更新

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

我的问题是我的回调会更正以前的值，而不是添加它们

我的可运行示例可在此处获得：

如何获得预期的结果

谢谢

问题 您正在覆盖每个排队状态更新，因为所有状态更新都在同一渲染周期内排队。您还可以使用array:：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）=>{
const newState=克隆（状态）；
newState.myValue.push（newValue）；//{
setTimeout（（）=>callback（“b”），1000）；//callback（“c”），2000）；
setTimeout（（）=>回调（“d”），3000；
};

解决方案 使用功能状态更新从以前的状态正确更新

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

const callback=（newValue）=>{
设置状态（状态=>({
…声明，//请确保您的整个问题（包括任何必要的代码）是在你的问题中，而不仅仅是链接。三个原因：人们不应该离开网站来帮助你；一些网站被某些用户屏蔽；链接腐烂，使问题及其答案在将来对人们毫无用处。请在问题中添加一个。更多：你可以使用堆栈片段在问题中添加一个可运行的React示例（
[]
工具栏按钮）。堆栈代码段支持React，包括JSX；。如果这是问题所在（说明与之匹配），则可以指向多个重复项。