React JS .map возвращает все данные столько же раз, сколько объекты в JSON.

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 для каждого со значениемкаждый.