React / Redux-如何渲染/更新深層嵌套狀態

Question

我將從API獲得一個深層嵌套的狀態-例如：

[{
    "id": 1,
    "text": "test",
    "children": [{
        "id": 1,
        "text": "test",
        "children": [{
            "id": 1,
            "text": "test",
            "children": [{
                "id": 1,
                "text": "test",
                "children": []
            }]
        }]
    }]
}]

（請忽略重復的ID等）

現在是這些要求：

• 我需要正確渲染

例如

<div>
text
  <div>
   text
  </div>
</div>

• 我需要能夠更新Redux存儲內的嵌套狀態

• 此列表可能非常龐大-至少需要3k項（理論上效果很好）

我試過的

一切都沒有：

• 渲染非常復雜（使用parentId）
• 維護結構很困難（需要展平和展平）->這會花費很多性能

嵌套所有內容：

• 沒有“欺騙”反應->直接操縱狀態，更新商店是不可能的

有什么解決方案？ 什么是架構

Answer 1

在這里，像不變性助手之類的東西可能對您有用。

const state = [{
    "id": 1,
    "text": "test",
    "children": [{
        "id": 1,
        "text": "test",
        "children": [{
            "id": 1,
            "text": "test",
            "children": [{
                "id": 1,
                "text": "test",
                "children": []
            }]
        }]
    }]
}];

const newState = update(state, { 
    0: { 
      children: { 
        0: {
          children {
            0 : {
              children: {
                0: { 
                  "id": { $set: 2}
                }
              }
            }
          }
        }
      }
   };

return newState;

[{
    "id": 1,
    "text": "test",
    "children": [{
        "id": 1,
        "text": "test",
        "children": [{
            "id": 1,
            "text": "test",
            "children": [{
                "id": 2,
                "text": "test",
                "children": []
            }]
        }]
    }]
}];

這里的0可以替換為payload一些索引； 我在這里只使用了0，因為示例數組中只有1個元素。 但是，這是非常深層的嵌套，因此，正如注釋所指出的那樣，您可以進行的任何拼合將使更新變得更容易。