Javascript 为Gatsby中的React代码添加嵌套映射

我试图在盖茨比项目中修改这段代码，并添加一个嵌套映射来呈现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>
  );
};

这是数据结构

展开以显示键值

---

是的，你的方法会奏效

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

返回(

{list.map（nest=>{
返回nest.map（项=>
{item.count}
)
})
}

);

---

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

若您认为每个嵌套数组都是一个容器，则首先迭代这些嵌套数组，然后迭代它包含的对象数组。在本例中，我添加了一些额外的

和

，以帮助将其可视化

const{useState，useffect}=React；
const data=[{“id”：“勒索软件”、“计数”：409}、{“id”：“钓鱼”、“计数”：358}、{“id”：“apt”、“计数”：296}、{“id”：“特洛伊木马”、“计数”：180}、{“id”：“病毒”、“计数”：111}、{“id”：“后门”、“计数”：99}、{“id”：“dos”、“计数”：97}、{“id”：“社会工程”、“计数”：72}、{“id”：“内部威胁”、“计数”：71}、{“id”：“有效载荷”、“计数”：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”、“cve-076}、{{“id:”cve-2019-1429“，”计数“，”计数“，”计数“：”银行“，”计数“，”计数“，”零售“，”计数“，”计数“，”计数“，”军事“，”计数“，”计数“，”计数“，”计数“，”计数“，”计数“，”计数“，”计数“，”计数“，”零售“，”计数“，”计数“，”73}，，”计数“，”计数“，”零售“，”计数“，”计数“，”军事“，”计数“，”计数“，”计数“，”计数“，”67}，，”数字“，”教育“，”计数“，”计数“，”计数“，”计数“，”计数“，”44}，，”保险“，”电信公司，计数：21}，计数：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}；
函数mycop（）{
const[list，setList]=useState（[]）；
useffect（（）=>setList（数据），[]）；
返回(

{list.map（容器=>(

{container.map（项=>(
{item.count}
))}

))}

);
};
//渲染它
ReactDOM.render(
,
document.getElementById（“react”）
)；

.container{
边缘：1米；
}

show data structure您看到json的数据了吗？另外，您没有返回nest.map，这段代码永远不会起作用。@ade1e请尝试此操作。您删除的状态是因为您使用的是钩子，我只是为了方便起见才将数据放在答案中。您应该继续像问题中那样使用API。@ade1e

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