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时，我可以看到我的数据，但是无法使用嵌套地图。

如何为该JSON文件中的所有数据打印item.id和item.count？我认为它应该看起来像这样，但我无法使其正常工作。感谢对此的任何帮助。

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

这是数据结构。

展开以显示键值。

Answer 1

如果您将每个嵌套数组都视为一个容器，请先对其进行迭代，然后对其所包含的对象数组进行迭代。在此示例中，我添加了一些额外的tibble(value = myData, group= myData$group %>% nest(value))和<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;
}

Answer 2

是的，您的方法可行！

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

一些语法问题我已经修复了一次检查！！

在Gatsby中为React代码添加嵌套地图

2 个答案: