Question

我是React的新手（2天），但始终坚持将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

只需使用要映射的item来打印每一个：

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

这将通过data.left.nodes上的键进行映射，并为每个li渲染一个具有每个值的{}。

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

1 个答案: