更新Redux值时检测到State Mutation异常问题咨询

问题根因 #

• 扩展运算符[...props.arrayForSettings]仅完成了数组层级的浅拷贝，数组内部存储的element对象仍然和Redux状态中的原对象共享内存引用，直接修改element.updatedObject本质是直接修改Redux原始状态，因此触发了状态突变校验报错
• updateAction被放在forEach循环内部执行，会在数组修改未完成的中间状态就触发Redux更新，也会导致状态校验异常

修复方案 #

修改时仅对需要变更的元素做拷贝，其余元素保持原引用即可，修改完成后统一触发Redux更新，参考代码如下：

// 先做数组层浅拷贝
const tempArrayForSettings = [...props.arrayForSettings];
// 遍历处理数组元素
const updatedArray = tempArrayForSettings.map(element => {
  // 不需要修改的元素直接返回原引用，兼顾性能
  if(element.settingsType !== "DesiredSettingType") return element;
  // 需要修改的元素先做对象层拷贝，再赋值新属性，避免修改原引用
  return {
    ...element,
    updatedObject: JSONUpdatedObject
  }
});
// 所有元素处理完成后统一触发更新
updateAction(updatedArray);

如果element对象层级超过1层，可根据实际需求选择对应层级的拷贝方式，只要保证不直接修改原对象的任何属性即可规避该报错。

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