ReactJS：向字典状态添加两个元素仅第二个生效，求问题原因

尝试一次性向React字典状态中添加2个元素，但只有第二个元素被成功添加。运行add2Items方法时，仅"Item2"被添加。示例代码如下：

const [dict, setDict] = useState({});

const addItem = (name, value) => {
  console.log("name", name);
  const newItem = { [name]: value };
  const newDict = Object.assign({}, dict, newItem);
  setDict(newDict);
};

const add2Items = () => {
  addItem("Item1", "test1");
  addItem("Item2", "test2");
};

这是因为React的useState更新是异步批量处理的，而且状态更新会捕获当前闭包中的状态值。

在add2Items连续调用两次addItem时，两次调用里的dict都是同一个初始空对象：

• 第一次addItem计算出的newDict是{Item1: 'test1'}，但状态还没来得及更新；
• 第二次addItem依然基于空的dict计算，得到{Item2: 'test2'}，直接覆盖了第一次的更新结果。

最终只有第二次的更新生效。

方法1：使用函数式更新 #

React允许给setState传递一个函数，这个函数会接收最新的状态值作为参数，确保每次更新都基于当前最新状态：

const addItem = (name, value) => {
  setDict(prevDict => {
    // 用展开语法更简洁直观
    return {...prevDict, [name]: value};
  });
};

方法2：合并操作后一次性更新 #

如果可以合并多个添加操作，也可以把要添加的元素合并成一个对象，一次性调用setDict更新：

const add2Items = () => {
  setDict(prevDict => {
    return {...prevDict, Item1: 'test1', Item2: 'test2'};
  });
};

内容的提问来源于stack exchange，提问作者SJ19