ReactJS 状态数组中复制的对象仍存在关联绑定问题如何解决？

你遇到的问题本质是对象引用共享导致的：你在执行复制操作时，直接将原对象的引用插入了数组，两个数组元素指向内存中的同一个对象，因此修改任意一个元素的属性都会同步影响另一个。

只需要在复制数组元素时，创建一个全新的对象拷贝，切断两个对象的引用关联即可，根据你的对象结构可以选择以下两种方案：

方案1：单层对象浅拷贝 #

如果你的数组元素只有一层属性（比如你示例中的{name:"Tom"}结构），直接用对象扩展运算符做浅拷贝即可：

// 原错误的复制逻辑示例
// const handleDuplicate = (index) => {
//   const newArr = [...list];
//   newArr.splice(index + 1, 0, newArr[index]); // 直接插入原对象，引用共享
//   setList(newArr);
// }

// 修正后的复制逻辑
const handleDuplicate = (index) => {
  const newArr = [...list];
  // 拷贝原对象的所有属性，生成全新对象
  const copiedItem = {...newArr[index]};
  newArr.splice(index + 1, 0, copiedItem);
  setList(newArr);
}

方案2：多层嵌套对象深拷贝 #

如果你的数组元素是包含多层嵌套的复杂对象（比如{name: "Dick", info: {age: 20, address: "xxx"}}），需要做深拷贝才能完全切断引用关联，推荐两种实现方式：

• 普通对象（无函数、Symbol、循环引用）可以用JSON序列化实现：

  const copiedItem = JSON.parse(JSON.stringify(newArr[index]));
  

• 包含特殊类型的对象可以用浏览器原生的structuredClone API：

  const copiedItem = structuredClone(newArr[index]);
  

修改对象属性时也需要遵循不可变更新原则，不要直接修改原对象的属性，要创建新对象替换：

const handleChange = (index) => {
  const newArr = [...list];
  // 不要直接写 newArr[index].name = "New Dick"
  newArr[index] = {...newArr[index], name: "New Dick"};
  setList(newArr);
}

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