Redux：减少 - 如何在嵌套数组递归期间避免对象不可扩展错误？

Question

我有以下带有嵌套对象的对象数组：

[
      {
        "name": "ONE",
        "properties": [
          {
             "name": "XXX"
          },
          {
             "name": "YY"
          }
        ]
      },
      {
        "name": "TWO",
        "properties": []
      }
    ]

---

我正在尝试使用 Reducer Function 中的 map 递归地将属性添加到每个对象。我在哪里遇到以下异常：

TypeError：无法添加属性 isChecked，对象不可扩展

projectData.myArr.map((item, index) => {
  item.isChecked = false;
  item.properties.map((value, index1) => {
    value.isChecked = false;
  })
});

我尝试使用这里讨论的 Object.assign()：Object is not extensible error when creating new attribute for array of objects

let newData = data.map((item) => 
    Object.assign({}, item, {selected:false})
)

但是这种方式允许我只为顶级对象添加属性，而不是为内部对象添加属性。

如何解决与 Redux 模式相关的嵌套对象？

Answer 1

使用嵌套的 spread syntax 在每个所需突变级别创建新对象：

projectData.myArr.map((item, itemIndex) => ({
  ...item,
  isChecked: false,
  properties: item.properties.map((value, valueIndex) => ({
    ...value,
    isChecked: false,
  }));
}));

Answer 2

也可以尝试使用Native StructuredClone或lodash cloneDeep（适用于V17.2.0之前的节点版本）

structuredClone(projectData).myArr.map((item, index) => {
  item.isChecked = false;
  item.properties.map((value, index1) => {
    value.isChecked = false;
  })
});

这将创建一个新的克隆，因此不会修改 redux 中的任何属性，从而允许人们自由地使用代码。