React中如何追加状态对象数组值？当前赋值存在覆盖问题

你当前的状态更新代码存在问题：在setArr的回调函数里，你解构了外部的arr变量，而非回调参数提供的prevState，这会导致使用旧的状态值，进而出现覆盖或状态不同步的情况。

正确的写法应该是基于回调函数提供的最新状态快照prevState来更新：

setArr((prevState) => ({
  ...prevState, // 保留状态对象中的其他属性（如果有的话）
  value: [...prevState.value, res.data] // 在原有value数组末尾追加新数据
}));

关键说明 #

• prevState是React传入的当前最新状态，用它来解构和更新能确保每次操作都基于最新的状态，避免闭包捕获旧值带来的错误。
• 扩展运算符...prevState用于保留状态对象中的其他属性（如果后续给这个状态对象添加新属性，这一步能保证原有属性不丢失）。
• [...prevState.value, res.data]创建了一个新数组，包含原有数组的所有元素，再加上新的res.data，符合React状态不可变的更新原则。

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