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

Posted 2023-04-14

【中文标题】更新深度嵌套的 react redux 状态数组元素

【英文标题】：Update deeply nested react redux state array element

【发布时间】：2021-03-15 16:31:43

【问题描述】：

我有一个这样的 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
              
            
          
        
      )

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

【参考方案1】：

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

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