如何向React状态变量中的数组批量添加多个对象？

问题原因 #

React的setState是异步更新的，当你在循环里多次调用addInvitee时，每次调用里的values都是当前渲染周期的旧值（也就是循环开始前的初始values）。比如初始invitees是空数组，三次调用addInvitee时，每次都是基于空数组添加单个用户，三次更新最终只会保留最后一次的结果——因为后面的更新会覆盖前面的。

解决方法1：改用函数式更新修改state #

修改addInvitee函数，使用函数式更新的方式，这样每次更新都会基于最新的state计算新值，而非依赖当前渲染的旧值：

const addInvitee = (user) => {
  setValues(prevValues => ({ 
    ...prevValues, 
    invitees: [...prevValues.invitees, user] 
  }))
}

之后不管是用map遍历还是for循环调用addInvitee，都能正确把所有用户累加到invitees数组里。

解决方法2：直接批量合并数组（更高效） #

既然是批量添加，没必要循环调用setState，直接合并两个数组后一次性更新state，性能更优：

// 批量添加所有用户的函数
const addAllInvitees = () => {
  setValues(prevValues => ({
    ...prevValues,
    invitees: [...prevValues.invitees, ...users]
  }))
}

一次setState就能完成批量添加，彻底避免多次异步更新的冲突问题。

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