React Hooks：更新对象数组属性的三种写法失效原因及简化方案

问题背景 #

我在实现全选复选框功能时，checkedOnChange函数里的三种setCheckboxes写法都无法正确更新复选框状态，希望明确失效原因；同时需要一份不依赖扩展运算符的最简实现方案，并对比参考示例的写法差异。

参考示例核心写法 #

setCheckboxes(
    checkboxes.map((checkbox) =>
      checkbox.id === id
        ? { ...checkbox, checked: !checkbox.checked }
        : checkbox
    )
);

三种失效写法的原因分析 #

写法一：直接修改原数组后传入setState #

//WHY DOESNT THIS WORK?
const arr = checkboxes;
const index = arr.findIndex((x) => x.id === id);
console.log(index);
console.log(arr);
arr[index].checked = !arr[index].checked;
setCheckboxes(arr);
console.log(checkboxes);

• 失效原因：const arr = checkboxes只是复制了数组的引用，本质还是操作原状态数组。React依赖引用变化触发重渲染，传入同一个引用的数组时，React会判定状态未改变，不会触发组件更新。

写法二：在函数式更新中修改原状态 #

//WHY DOESNT THIS WORK?
setCheckboxes((prevState) => {
  const arr = prevState;
  const index = arr.findIndex((x) => x.id === id);
  console.log(index);
  console.log(arr);
  arr[index].checked = !arr[index].checked;
  return arr;
});

• 失效原因：和写法一本质相同，arr是prevState的引用，直接修改原状态对象属性后返回同一数组引用。React对比前后状态时发现引用未变，不会触发重渲染，同时违反了React状态不可变的原则。

写法三：使用forEach返回的结果传入setState #

//WHY DOESNT THIS WORK?
setCheckboxes(
  checkboxes.forEach((checkbox) => {
    if (checkbox.id === id) {
      checkbox = { ...checkbox, checked: !checkbox.checked }
    }
  })
);

• 失效原因：forEach方法无返回值（默认返回undefined），相当于给setCheckboxes传入undefined，直接破坏状态结构，无法正确更新。另外，内部重新赋值checkbox也不会修改原数组中的元素。

不使用扩展运算符的最简实现方案 #

const checkedOnChange = (id) => {
  // 用Array.from创建原数组的浅拷贝
  const newCheckboxes = Array.from(checkboxes);
  // 找到目标元素索引
  const index = newCheckboxes.findIndex(item => item.id === id);
  // 用Object.assign创建目标元素的拷贝并修改属性
  const updatedItem = Object.assign({}, newCheckboxes[index]);
  updatedItem.checked = !updatedItem.checked;
  // 替换拷贝数组中的元素
  newCheckboxes[index] = updatedItem;
  // 更新状态
  setCheckboxes(newCheckboxes);
};

也可以用concat替代Array.from完成数组拷贝：

const newCheckboxes = checkboxes.concat();

和参考示例的写法差异 #

1. 实现思路：参考示例用map遍历数组，一步生成包含新元素的数组；最简实现先拷贝数组，再单独修改目标元素，步骤更拆分，适合理解状态不可变的核心逻辑。
2. 语法复杂度：参考示例用了箭头函数、三元运算符和扩展运算符，写法简洁但需要掌握ES6语法；最简实现用Object.assign和基础数组拷贝方法，更偏向基础语法，新手更容易理解。
3. 不可变原则体现：两者都遵循React状态不可变原则，参考示例通过map生成全新数组；最简实现通过拷贝数组和对象，确保原状态不被修改。

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