Добавление вложенной карты для кода React в Гэтсби

Question

Я пытался изменить этот код в своем проекте Gatsby и добавить вложенную карту для отображения содержимого файла JSON.

import React, { useState, useEffect } from 'react';

function getJson() {
  return fetch('http://secstat.info/testthechartdata3.json')
    .then(response => response.json())
    .catch(error => {
      console.error(error);
    });
}

const MyComp = () => {
  const [list, setList] = useState([]);

  useEffect(() => {
    getJson().then(list => setList(list));
  }, []);

  return (
    <ul>
      {list.map(item => (
        <li key={item.id}>{item.count}</li>
      ))}
    </ul>
  );
};

Когда я добавляю list[0].map к коду выше, я могу видеть мои данные, но я не могу заставить работать вложенную карту.

Как распечатать item.id и item.count для всех данных в этом файле JSON, пожалуйста? Я думаю, это должно выглядеть примерно так, но я не могу заставить его работать. Цените любую помощь с этим.

list.map(nestedjson=>
nestedjson.map(item => (
            <li key={item.id}>{item.count}</li>
          ))}
        </ul>

Это структура данных.

Расширен для отображения значения ключа.

Answer 1

Если вы думаете о каждом вложенном массиве как о контейнере, вы сначала выполняете итерации по ним, а затем итерируете по массиву объектов, которые он содержит. В этом примере я добавил несколько <ul> и <li>, чтобы помочь визуализировать это.

const { useState, useEffect } = React;

const data = [[{"id": "ransomware", "count": 409}, {"id": "phishing", "count": 358}, {"id": "apt", "count": 296}, {"id": "trojans", "count": 180}, {"id": "viruses", "count": 111}, {"id": "backdoors", "count": 99}, {"id": "dos", "count": 97}, {"id": "social engineering", "count": 72}, {"id": "insider threat", "count": 71}, {"id": "payloads", "count": 65}], [{"id": "cve-2019-19781", "count": 15}, {"id": "cve-2019-0708", "count": 14}, {"id": "cve-2020-0601", "count": 9}, {"id": "cve-2020-0674", "count": 8}, {"id": "cve-2019-1182", "count": 8}, {"id": "cve-2019-1181", "count": 8}, {"id": "cve-2019-11510", "count": 7}, {"id": "cve-2019-1367", "count": 7}, {"id": "cve-2020-0796", "count": 6}, {"id": "cve-2019-1429", "count": 6}], [{"id": "banking", "count": 171}, {"id": "retail", "count": 73}, {"id": "military", "count": 67}, {"id": "education", "count": 44}, {"id": "insurance", "count": 38}, {"id": "energy", "count": 36}, {"id": "transport", "count": 29}, {"id": "health care", "count": 29}, {"id": "finance", "count": 22}, {"id": "telcos", "count": 21}], [{"id": "emotet", "count": 61}, {"id": "trickbot", "count": 51}, {"id": "ryuk", "count": 41}, {"id": "bluekeep", "count": 40}, {"id": "wannacry", "count": 35}, {"id": "rover", "count": 18}, {"id": "dridex", "count": 15}, {"id": "azorult", "count": 13}, {"id": "epic", "count": 12}, {"id": "wiper", "count": 11}]];

function MyComp() {
  const [list, setList] = useState([]);

  useEffect(() => setList(data), []);

  return (
    <ul>
      {list.map(container => (
        <li className="container"><ul>
          {container.map(item => (
            <li key={item.id}>{item.count}</li>
          ))}
        </ul></li>
      ))}
    </ul>
  );
};

// Render it
ReactDOM.render(
  <MyComp />,
  document.getElementById("react")
);

.container {
  margin: 1em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>

Answer 2

Да, ваш подход будет работать !!

return (
    <ul>
      {list.map(nest => {
        return nest.map(item => 
        <li key={item.id}>{item.count}</li>
       )
      })
     }
    </ul>
  );

Некоторые проблемы с синтаксисом, я исправил проверку один раз !!