React中添加新对象时如何保留已有数据？

初始数据 #

const a = [{
    name: "a"
}, {
    name: "b"
}, {
    name: "c"
}]

需求 #

要给上面的数组动态添加新对象——先手动加{name:"d"}，后续通过onChange事件添加{name: onchangedata?.value}，最终期望得到：

[{
    name: "a"
}, {
    name: "b"
}, {
    name: "c"
}, {
    name: "d"
}, {
    name: "e"
}]

遇到的问题 #

试过用[...a,{name:"d"} ]和{...a?.concat({name: onchangedata?.value})}，但每次添加新元素时，新对象都会替换掉之前加的元素，没法实现累积添加。

问题原因 #

你每次操作都是基于**原始常量数组a**来扩展或拼接，而不是基于上一次更新后的最新数组。比如每次执行[...a, {name:"d"}]，都是从[a,b,c]重新生成新数组，再加新元素自然会覆盖之前的结果。另外{...a?.concat(...)}是错误写法——concat返回的是数组，用对象扩展运算符会把数组转成键为索引的对象，完全不符合需求。

解决方案 #

1. React状态场景（最常见的动态添加场景） #

如果是在React里用状态管理，必须用函数式更新确保拿到最新的状态值：

// 初始化状态
const [arr, setArr] = useState(a);

// 封装添加元素的方法
const addNewItem = (newName) => {
  // 用prevArr获取当前最新的数组状态，再基于它扩展
  setArr(prevArr => [...prevArr, { name: newName }]);
};

// 调用示例
addNewItem("d");
addNewItem("e");

2. 普通JavaScript场景 #

普通JS环境下，要维护一个存储最新数组的变量，每次更新都基于这个变量操作：

// 先复制初始数组到可变变量
let currentArr = [...a];

// 添加d
currentArr = [...currentArr, { name: "d" }];
// 添加e
currentArr = [...currentArr, { name: "e" }];

console.log(currentArr); // 得到预期的数组

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