更新深度嵌套的 react redux 状态数组元素

Question

我有一个这样的 redux 状态数组

[{
    client_id:12,
    template:{
     item1:[],
     item2:[],
     simple templates:[
      "Some paragraph 1",
      "Some paragraph 2",
      "Some paragraph 3",
     ]
    }
}]

所以我想使用 redux 不变性助手 https://reactjs.org/docs/update.html 更新 simple templates 数组上的元素。例如，我想用 "Some paragraph #2" 更新 "Some paragraph 2"。我正在使用表单将要更新的数据传递给减速器。

到目前为止，我一直在尝试这样的事情

case TEMP_UPDATE_TEMPLATE: {
      console.log('index', action.payload.index); 
      console.log('data', action.payload.data); //new data that I want to update

      return update(state.simple_templates, {
        [0]: {
          template: {
            "Simple Templates": {
              [action.payload.index] : {
                $set: action.payload.data
              }
            }
          }
        }
      })
}

这真的让我很困惑。请帮助我了解如何使用给定索引更新深度嵌套对象数组的元素。

Answer 1

尝试使用$splice 而不是$set，因为它是一个数组。

return update(state.simple_templates, {
  [0]: {
    template: {
      "simple templates": {
        $splice: [action.payload.index, 1, action.payload.data]
      }
    }
  }
})