在React组件中复制嵌套映射

Question

我正在努力映射一些数据，以便我可以正确显示它。我有一个对象，我删除了很多数据但整体结构是这样的

{
"userData":[
{
"name":"something",
"job":"something",
}
],
"bikeData":[
{
"id":1,
"userId":1,
"bikesResults": {
"bike_technical":[
[
{
"speed":"28.3mph",
"gears":4,
}
]
],
"top_10_bikes":[
[
{
"name":"Bike1",
"values":3.5,
},
{
"name":"Bike2",
"values":5.4,
},
{
"name":"Bike3",
"values":9.8,
},
{
"name":"Bike4",
"values":4.3,
},
]
],
"bike_score":[
{
"quality":"7",
"price":"3"
}
]
},
"Something":1,
"Somethingelse":0,
}
],
}

所以我感兴趣的是bikeData部分，更具体地说是bikesResults和top_10_bikes。因为bikeData本质上是一个对象数组，所以我使用map.

bikeObject.bikeData.map((item, index) => {
console.log(item.bikesResults);
});

所以console.log将输出bikesResults的数据，所以这似乎是工作的。

我正在努力的部分是下一部分，从前10名的自行车中获取数据。

我创建了一个示例JSFiddle来展示如何使用纯Javascript使其工作。然而，在React中，我正在与嵌套映射作斗争。目前我正在尝试这样做

{bikeObject.bikeData.map((item, index) => {
return item.bikesResults.top_10_bikes.map((item2) => (
{ item2 }
));
})} 

我再次创建了一个JSFiddle来进行演示。正如您在这个小提琴中看到的，在控制台中，我得到错误，并且不确定我如何甚至可以做第三个映射。

可能有更好的方法来做到这一点?但我的主要目标是在React中，打印出top_10_bikes中的数据。

如有任何建议，不胜感激。

感谢

Answer 1

return (
<div className="App">
<div>
<h2>Data:</h2>
{bikeObject.bikeData.map((item) => {
return item.bikesResults.top_10_bikes.map((item2) => {
return item2.map((item3) => {
return (
<div>
<p>{item3.name}</p>
<p>{item3.values}</p>
</div>
);
});
});
})}
</div>
</div>
);