React中含对象数组的状态浅拷贝是否可行？需用深拷贝吗？

问题核心总结 #

你通过[...cars]创建数组的浅拷贝后，修改拷贝数组中对象的brand属性，导致原状态cars也被修改——这是因为浅拷贝仅复制了数组的引用，数组内的对象仍指向原内存地址。

针对你的三个问题的解答： #

1. 这种做法不可行
   直接修改React状态内部的对象违反了React的状态不可变性原则。React依赖状态的引用变化来触发组件重新渲染，直接修改原对象不会让React检测到状态更新，可能导致组件无法重新渲染，或者出现UI与状态不一致的问题。

2. 这属于典型的不良实践
   手动修改状态的内部值会破坏React的状态管理机制，使得状态变化变得不可追踪，增加调试难度，还可能引发不可预测的渲染行为（比如旧的状态值被意外复用）。

3. 不需要改用全量深拷贝
   对于单层结构的对象（如示例中的{id: 0, brand: 'BMW'}），只需要对要修改的单个对象做浅拷贝即可，无需对整个数组做深拷贝。这样既遵循了不可变性原则，又避免了深拷贝带来的性能开销。

正确的实现方式 #

方式一：使用map遍历数组，修改目标对象

const updatedCars = cars.map((car, idx) => {
  // 找到最后一个对象，返回新的拷贝对象并修改属性
  if (idx === cars.length - 1) {
    return {...car, brand: 'Toyota'};
  }
  // 其他对象直接返回原引用
  return car;
});

// 通过setCars更新状态
setCars(updatedCars);

方式二：拆分数组，替换最后一个元素

const lastIdx = cars.length - 1;
const updatedCars = [
  ...cars.slice(0, lastIdx), // 复制最后一个元素之前的所有项
  {...cars[lastIdx], brand: 'Toyota'} // 复制并修改最后一个对象
];

setCars(updatedCars);

补充说明 #

如果你的对象存在多层嵌套（比如{id: 0, brand: 'BMW', owner: {name: 'Alice'}}），此时修改嵌套对象的属性才需要用到深拷贝，可通过JSON.parse(JSON.stringify(car))（仅适用于无函数、Symbol等特殊类型的对象）实现，但要注意深拷贝的性能成本，尽量只对需要修改的嵌套部分做局部拷贝。

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