Javascript 如何循环遍历Reactjs中的嵌套字典或json数据

使用

Reactjs

如何创建一个

函数组件

，该组件循环通过下面的

json数据

，并显示

位置

内容

如果需要，我希望该函数还能够显示其他内容，如

成员

我对react还不熟悉，大多数在线示例都显示它使用类组件（我对此不感兴趣）

data.json

---

可以像映射类组件一样映射函数组件中的数据。对于本例，只能列出嵌套数据：

const List=（）=>{
返回(
{data.map（项=>
（item.members | |[]）.map（member=>
（member.location | |[]）.map（item=>（{item}））
)
)}
);
};
您可以像映射类组件一样映射功能组件中的数据。对于本例，只能列出嵌套数据：


const List=（）=>{
返回(
{data.map（项=>
（item.members | |[]）.map（member=>
（member.location | |[]）.map（item=>（{item}））
)
)}
);
};
当然，我不能为您提供完整的项目解决方案，但您想要的功能必须具有这种逻辑


const jsonData=[{
“squadName”：“超级英雄小队”，
“故乡”：“大都市”，
“成立”：2016年，
“秘密基地”：“超级塔”，
“主动”：正确，
“成员”：[
{
“名字”：“分子人”，
“年龄”：29岁，
“秘密性”：“丹·朱克斯”，
“权力”：[
“抗辐射”，
“变小”，
“辐射爆炸”
]
},
{
“授权”：“黑卡”，
“地点”：[
“下一步”，
“以前”，
“这里”
]
}
]
}]
jsonData.forEach（项=>{
item.members.map（（成员）=>{
if（member.location&&member.location[0]）{
//不管做什么，也许你想在那里使用return语句
console.log（member.location）
}
否则{
//做点别的，或者增加更多的条件
log（“其中没有位置”）
}
})
})
当然，我不能为您提供完整的项目解决方案，但您想要的功能必须具有这种逻辑


const jsonData=[{
“squadName”：“超级英雄小队”，
“故乡”：“大都市”，
“成立”：2016年，
“秘密基地”：“超级塔”，
“主动”：正确，
“成员”：[
{
“名字”：“分子人”，
“年龄”：29岁，
“秘密性”：“丹·朱克斯”，
“权力”：[
“抗辐射”，
“变小”，
“辐射爆炸”
]
},
{
“授权”：“黑卡”，
“地点”：[
“下一步”，
“以前”，
“这里”
]
}
]
}]
jsonData.forEach（项=>{
item.members.map（（成员）=>{
if（member.location&&member.location[0]）{
//不管做什么，也许你想在那里使用return语句
console.log（member.location）
}
否则{
//做点别的，或者增加更多的条件
log（“其中没有位置”）
}
})
})
我们需要更多详细信息。你能给我们看一下你的组件代码吗？@wentjun我还没有找到使用功能组件的方法。这就是我问的原因，假设您必须在名为
ShowData
的页面中呈现这些数据，您将导出到
App.js
，我们需要更多详细信息。你能给我们看一下你的组件代码吗？@wentjun我还没有找到使用功能组件的方法。这就是我问的原因，假设您必须在一个名为
ShowData
的页面中呈现这些数据，您将导出到
App.js
您可能希望在将脚本发布为答案之前运行它们；）是的，谢谢。您可能希望在将脚本作为答案发布之前运行脚本；）是的，谢谢。
[{
  "squadName": "Super hero squad",
  "homeTown": "Metro City",
  "formed": 2016,
  "secretBase": "Super tower",
  "active": true,
  "members": [
    {
      "name": "Molecule Man",
      "age": 29,
      "secretIdentity": "Dan Jukes",
      "powers": [
        "Radiation resistance",
        "Turning tiny",
        "Radiation blast"
      ]
    },
    {
      "authorization": "Black card",
      "location": [
        "Next",
        "Previous",
        "Here"
      ]
    }
  ]
}]