React组件中如何通过嵌套map遍历获取top_10_bikes数据

错误原因 #

• 数据结构不匹配：你提供的top_10_bikes是二维数组结构，实际存储单车数据的数组被包裹在第一层数组内，你只做了一层遍历，拿到的是数组而不是单个单车对象
• 违反React渲染规则：直接返回JS对象{ item2 }，React不支持直接渲染原始对象，会抛出渲染错误
• 缺少列表必备的key属性，会触发控制台警告

实现代码 #

通用嵌套遍历写法（兼容任意数量的内层数组）

如果不确定top_10_bikes的内层数组数量，用三层遍历的写法：

{bikeObject.bikeData.map((bikeItem, groupIndex) => (
  <div key={`bike-group-${groupIndex}`}>
    {bikeItem.bikesResults.top_10_bikes.map((bikeList, listIndex) => (
      <div key={`bike-list-${listIndex}`}>
        {bikeList.map((singleBike, bikeIndex) => (
          <div key={`bike-${bikeIndex}`}>
            单车名称：{singleBike.name}，数值：{singleBike.values}
          </div>
        ))}
      </div>
    ))}
  </div>
))}

简化写法（确认top_10_bikes永远只有1个内层数组）

根据你给出的示例结构，top_10_bikes永远只有一层内层数组，可以直接取索引[0]省略一层遍历，性能更优：

{bikeObject.bikeData.map((bikeItem, groupIndex) => (
  <div key={`bike-group-${groupIndex}`}>
    {bikeItem.bikesResults.top_10_bikes[0].map((singleBike, bikeIndex) => (
      <div key={singleBike.name || `bike-${bikeIndex}`}>
        单车名称：{singleBike.name}，数值：{singleBike.values}
      </div>
    ))}
  </div>
))}

注意事项 #

• 如果数据是异步获取的，建议添加可选链运算符做兼容，避免数据未加载完成时读取属性报错，示例：bikeObject?.bikeData?.map、bikeItem?.bikesResults?.top_10_bikes?.[0]?.map
• 列表渲染的key尽量使用数据自带的唯一字段，比如单车的唯一ID，没有唯一字段时再使用索引替代

内容的提问来源于stack exchange，提问作者chewbacca2115