Javascript map返回所有数据的时间与JSON中的对象相同

我刚开始反应2天，但仍坚持将JSON视为树状视图。 需要显示为折叠菜单节点标签，然后单击“显示其数据”

我终于找到了显示节点标签的解决方案，但它们都显示在一个列表项中，并且重复的次数与我拥有的节点数量相同

这里是mys-JSON

  {
  "main": {
    "nodes": {
      "firstnode": {
        "storage": [
          "1",
          "1",
          "3"
        ],
        "interfaces": [
          "1",
          "2",
          "3"
        ]
      },
      "secondnode": {},
      "thirdnode": {}
    }
  },
    "secondary": {}
}

这是我的密码

    const LeftTreeNodes = Object.keys(data.left.nodes).map(item =>
<div>
  <ul>
    <li key={Object.keys(data.left.nodes)}>
     {Object.keys(data.left.nodes)}
    </li>
  </ul>
  </div>
);

只需使用映射的项目打印每个项目：

<div>
  <ul>
    {Object.keys(data.left.nodes).map(item =>
      <li key={item}>
        {item}
      </li>
    )}
  </ul>
</div>

---

这将映射data.left.nodes上的键，并使用每个键的值为每个节点渲染一个li。

@davintron构建树的正确方法是什么？