Question

我将从API中获得一个深度嵌套的状态 - 例如：

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

（请忽略重复的ID等）

现在有以下要求：

我需要正确渲染这个

e.g。

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

我需要能够在redux store
此列表可能很大 - 至少有3k项（理论上可以正常工作）

我尝试了什么：

让所有事情都无人问津：

渲染非常复杂（使用parentId）
难以保持结构（需要将其展平和展平） - ＆gt;这会花费很多性能

嵌套所有内容：

在没有“作弊”的情况下更新商店是不可能的 - ＆gt;直接操纵国家

什么可以解决这个问题？什么应该是架构

Answer 1

像immutability-helper这样的东西可能会对你有用。

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个元素。这是非常深层次的嵌套，正如评论指出的那样，你可以做的任何展平都会使更新变得更容易。

React / Redux - 如何渲染/更新深层嵌套状态

1 个答案: