Reactjs 如何在react中更新深度递归嵌套的对象数组

如何在我的reducer中正确更新这个嵌套对象（状态有一个这些对象的列表，而负载有一个可以是嵌套对象的特定对象

[
   {
       "id": 339,
       "children": [
           {
               "id": 381,
               "children": [
                   {
                       "id": 383,
                       "children": [],
                       "name": "Capability_C",
                       "level": 3,
                   }
               ],
               "name": "Capability_B",
               "level": 2,
           }
       ],
       "name": "Capability_A",
       "level": 1,
   }

] 

---

数据结构的递归性使得这是一项非常重要的任务。您需要一种方法来进入它，处理错误路径，并动态克隆您更新的任意深度的状态

您将需要一个类似于以下内容的操作，其中路径数组是一个id号列表，可以为您的数据提供一个条目：

        return [...state, payload];

{
类型：“创建_能力”；
有效载荷：{
路径：数组；
能力：能力对象；
}
}

然后在reducer中，将此操作传递给当前reducer状态旁边的递归函数：

//函数
常量insertCapability=（状态、操作）=>{
const{path，capability}=action.payload；
if（path.length==0）返回[…状态，能力]；
const nextId=path.shift（）；
const childIdx=state.findIndex（cap=>cap.id==nextId）；
if（childIdx<0）返回状态；
const nextChild={
…州[childIdx]，
子项：可插入性（状态[childIdx]。子项，操作）
}
return（s=>{s[childIdx]=nextChild；return s；}）（[…state]）；
};
//测试用例
常量状态=[
{
“id”：339，
“儿童”：[
{
“id”：381，
“儿童”：[
{
“id”：383，
“儿童”：[…]，
“名称”：“能力”，
"三级",，
}
],
“名称”：“能力”，
“级别”：2，
}
],
“名称”：“能力”，
"一级",，
}
];
常量动作={
键入：“创建_能力”，
有效载荷：{
路径：[339381383]，
能力：{
id:400，
儿童：[]，
名称：“新能力”，
级别：4，
}
}
}
console.log（insertCapability（state，action））；

case-CREATE_-CAPABILITY:return[…state，payload]；你是一个天才。如果你觉得有用，记得升级投票或标记accepted。如果你想了解有关所用流程的任何信息，请询问。

{
  type: "CREATE_CAPABILITY";
  payload: {
    path: Array<number>;
    capability: CapabilityObject;
  }
}