更新对象的嵌套数据数组（Redux）

小编典典

更新对象的嵌套数据数组（Redux）

reactjs

我在更新不可变的redux和完全嵌套的数据时遇到问题。这是我的数据结构以及我要更改的示例。如果有人可以向我展示使用ES6和传播运算符访问此更新的模式，我将不胜感激。😀

const formCanvasInit = {
  id: guid(),
  fieldRow: [{
    id: guid(),
    fieldGroup: [
      { type: 'text', inputFocused: true }, // I want to change inputFocused value
      { type: 'text', inputFocused: false },
    ],
  }],

  // ...
};

阅读 279

2020-07-22

共1个答案

小编典典

假定数据完全按照所示设置，并使用给定的数组索引，这应该可以解决问题：

const newData = {
   ...formCanvasInit,
   fieldRow: [{
      ...formCanvasInit.fieldRow[0],
      fieldGroup: [
         { ...formCanvasInit.fieldRow[0].fieldGroup[0], inputFocused: newValue },
         ...formCanvasInit.fieldRow[0].fieldGroup.slice(1, formCanvasInit.fieldRow[0].fieldGroup.length)
      ]
   }]
};

如果要动态确定要更改的元素的索引，则需要使用诸如filter查找和删除要更新的数组元素之类的功能，然后通过编辑对的调用结构来传播相应的子数组slice。

2020-07-22