React：更新对象数组单个属性后其余属性变为undefined问题排查

核心原因 #

你的代码语法逻辑本身没有问题，出现该问题基本是原对象的属性特性不符合展开运算符的复制规则导致的：

• 展开运算符...仅会复制对象自身的可枚举属性，如果propertyA属于以下任意一类属性，就不会被复制到新对象中：

  1. 该属性是通过Object.defineProperty定义，且明确设置了enumerable: false
  2. 该属性是对象从原型链继承得到的，不属于对象自身的自有属性
  3. 原对象是类的实例，属性定义在类的原型上而非单个实例自身

• 其他小概率触发原因：

  1. 代码执行间隙有异步操作修改了copyOfItems[currentIndex]对应的原对象属性
  2. 原对象是Proxy代理、Map/Set实例等特殊类型对象，展开运算无法正常读取属性

修复方案 #

你可以根据场景选择以下任意一种方法解决：

1. 改用Object.assign生成新对象，比展开运算符对特殊属性的兼容性更好

const updatedItem = Object.assign({}, copyOfItems[currentIndex], { propertyB: "newVal" });

2. 手动罗列需要保留的属性，彻底规避属性特性导致的复制问题

const original = copyOfItems[currentIndex];
const updatedItem = {
  propertyA: original.propertyA,
  // 其余需要保留的属性逐一列出
  propertyB: "newVal"
};

3. 如果原对象是类实例等特殊对象，可以先转成普通对象再修改

// 注意：该方法会丢失原对象的函数、Symbol、undefined类型属性
const updatedItem = {
  ...JSON.parse(JSON.stringify(copyOfItems[currentIndex])),
  propertyB: "newVal"
};

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