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

我在更新不可变的redux和非常嵌套的数据时遇到了问题。下面是我的数据结构示例，以及我想要更改的内容。如果有人能告诉我使用ES6和spread operator访问此更新的模式，我将不胜感激 假设数据的设置完全如图所示，并且具有给定的数组索引，则这应该可以做到这一点：

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)
      ]
   }]
};

如果要动态确定要更改的元素的索引，则需要使用

过滤器
等功能查找并删除要更新的数组元素，然后通过编辑调用
切片的结构来扩展相应的子数组

我认为在你的结构中，就像这样

let news = update(formCanvasInit, {
  fieldRow: [{
    fieldGroup: [
     { $set: {type: "number", inputFocused: false}}
    ]
  }]
})

我试过了
这是一个较长的解决方案，但随着redux状态的增长，它可能会对您有所帮助。我还更改了原始状态下的一些值，以便做出更清楚的解释

const formCanvasInit = {
  id: 'AAAAXXXX',
  fieldRow: [
    {
      id: 1001,
      fieldGroup: [
        {type: 'text1', inputFocused: true}, // I want to change inputFocused value
        {type: 'text2', inputFocused: false},
      ]
    },
    {
      id: 1002,
      fieldGroup: [
        {type: 'text3', inputFocused: true},
        {type: 'text4', inputFocused: true},
      ]
    }
  ]
};

// the id of the field row to update
const fieldRowID = 1001;
// the value of the field type to update
const fieldTypeValue = 'text1';
const fieldRow = [...formCanvasInit.fieldRow];

// obtain the correct fieldRow object
const targetFieldRowIndex = formCanvasInit.fieldRow.findIndex(fR => fR.id === fieldRowID);
let fieldRowObj = targetFieldRowIndex && formCanvasInit.fieldRow[targetFieldRowIndex];

// obtain that fieldRow object's fieldGroup
const fieldGroup = [...fieldRowObj.fieldGroup];

// obtain the correct object in fieldGroup
const fieldIndex = fieldGroup.findIndex(fG => fG.type === fieldTypeValue);
const fieldToChange = fieldIndex && fieldGroup[fieldIndex];

// replace the old object in selected fieldGroup with the updated one
fieldGroup.splice(fieldIndex, 1, {...fieldToChange, inputFocused: false});

// update the target fieldRow object
fieldRowObj = {...fieldRowObj, fieldGroup};

// replace the old fieldGroup in selected fieldRow with the updated one
fieldRow.splice(targetFieldRowIndex, 1, fieldRowObj);

// create the new formCanvasInit state
const newFormCanvasInit = {...formCanvasInit, fieldRow};

我对redux一无所知，但正如您所说，它是不可变的，这意味着您无法修改或更新它…：这种情况下的可调性意味着我们不应该直接修改数据，因此我们必须先进行浅拷贝，然后才能修改复制的数据。你不想要肤浅的副本；您需要一个真正的副本，或者像这样对嵌套属性的编辑将渗透到原始状态，这可能会导致flux体系结构中出现问题。@treyhakanson是的，我的意思是复制所有级别的嵌套数据。此解决方案的可能副本似乎正在工作，谢谢。我真的很感谢你的帮助。没有问题；它有点长，但on the spread操作符基本上涵盖了您需要知道的所有内容。这里是一个更快的阅读从我不知道这是否工作，如果我们试图更新的东西不是第一个领域的FieldSoad索引，这也是可行的，我可以考虑重构我的代码库使用这个帮手。我有一个问题，如何获得inputFocused值，因为我想在某个动作发生时切换inputFocused。我想做一些像//。。。输入聚焦：！inputFocused如何实现这一点？看到这么长的代码，我有点不知所措，但这有助于我以不同的方式思考。我知道我有点好奇为什么需要在减速机中存储输入的焦点状态。你能用输入组件的内部状态来管理这个状态吗？老实说，这不是我想要在我的应用程序上使用的真正的数据状态，我只是想确定不可变更新的概念。这个问题是我理解人们如何解决这类案件的方法之一，我想从最简单的一个开始。