时间戳

首页 > 解决方案 > React JS .map 返回所有数据的时间与 JSON 中的对象相同

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

问题描述

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

标签： javascriptreactjsloopstreeview

解决方案

只需使用item您正在映射的打印每个：

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

这将通过键映射并为每个键data.left.nodes呈现一个具有每个键的值。li

推荐阅读