React中连续两次调用useState更新列表仅最后一次生效，原因是什么如何解决？

• React的useState状态更新默认启用批处理，同一事件循环内的多次状态更新会被合并执行。你当前在addItem函数中直接基于当前渲染周期闭包内的旧itemList生成新数组传入setItemList，两次更新使用的都是同一个初始状态值，第二次更新会直接覆盖第一次的更新结果，最终仅第二个元素被成功添加。
• 额外问题：你代码中列表项的key取值为i + itemList存在逻辑错误，itemList是数组，转字符串后会随列表整体变化，会触发所有列表项不必要的重渲染，建议使用唯一稳定的业务值作为列表key。

方案1：改用函数式状态更新（最推荐） #

将setItemList的入参改为更新函数，函数的第一个参数会自动传入上一次更新完成后的最新状态，避免闭包旧值问题：

// 修改App.js中的addItem函数
function addItem(item) {
  setItemList(prevList => [...prevList, item]);
}

修改后连续调用多次onAddItem也会基于前一次的更新结果累加元素，不会出现覆盖问题。

方案2：单次更新批量添加元素 #

如果确定是一次性添加多个元素，也可以调整逻辑直接批量传入，避免多次调用状态更新函数：

// 调整addItem支持传入多个元素
function addItem(...items) {
  setItemList(prevList => [...prevList, ...items]);
}

// ItemForm中调用时一次传入所有要添加的元素
onAddItem(item, item + " second time");

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