Next.js中Redux状态突变错误求助：触发handleDropdownOChange时报错

问题根源 #

你遇到的Redux状态突变错误，是因为在handleDropdownOChange函数中，虽然通过[...productAttributes]浅拷贝了数组，但数组内的属性对象仍和Redux状态中的对象共享引用。直接执行att[name] = data时，实际是在修改Redux状态里的原对象，违反了Redux不可变更新的原则。

修复代码 #

修改组件中的handleDropdownOChange函数，确保更新属性时返回新的对象，而非修改原对象：

const handleDropdownOChange = (data, e, rowId) => {
  const { name } = e;
  const attributes = productAttributes.map((att) => {
    if (att.id === rowId) {
      // 复制原对象并修改目标属性，返回全新对象
      return { ...att, [name]: data };
    }
    return att;
  });
  dispatch(bindProductAttributes(attributes));
};

原理说明 #

• 原代码里的[...productAttributes]仅创建了数组的浅拷贝，数组内的每个att对象仍指向Redux状态中的原对象，直接修改会触发状态突变检测。
• 使用{ ...att, [name]: data }生成新对象，既保留了原对象的所有属性，又更新了目标属性，完全符合Redux不可变更新的要求，不会触发错误。

内容的提问来源于stack exchange，提问作者Sakhawat Hossain Sohel