javascript - React JS .map 与 JSON 中的对象同时返回所有数据

Question

我是 React 新手(2 天)，但一直坚持以 TreeView 形式查看 JSON 的任务。 需要显示为折叠菜单节点标签并单击显示其数据。

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

这是我的 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>
);

Answer 1

只需使用您正在映射的项目来打印每个项目:

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

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