ReactJS中如何遍历嵌套对象数组并获取内层数组的值？

你手里的dateData为两层嵌套结构：外层是长度为3的数组，每个元素为携带dateValue属性的对象，dateValue对应长度为13的内层存储值的数组，结构参考：

// 结构示意
const dateData = [
  { dateValue: Array(13) },
  { dateValue: Array(13) },
  { dateValue: Array(13) }
]

遍历逻辑非常直接，做两层循环即可：第一层遍历外层数组拿到每个对象，第二层遍历对象下的dateValue数组就能拿到所有内层值，根据使用场景分两种常见写法：

1. 逻辑层取值/数据处理 #

如果不需要渲染，只是要取出内层值做计算、数据格式转换，用forEach、flatMap等遍历方法都可以实现：

// 示例1：用forEach双层遍历打印/收集所有值
const allValues = []
dateData.forEach((groupItem, groupIndex) => {
  // 先拿到当前组的内层数组
  const innerList = groupItem.dateValue
  innerList.forEach((value, valueIndex) => {
    // 这里就能拿到每一个内层值，groupIndex范围0-2，valueIndex范围0-12
    console.log(`第${groupIndex+1}组，第${valueIndex+1}项值：`, value)
    allValues.push(value)
  })
})

// 示例2：如果只需要拍平成一维数组，直接用flatMap一行搞定
const flatValueList = dateData.flatMap(item => item.dateValue)

2. JSX中渲染嵌套列表 #

如果要把数据渲染到页面上，用map做两层遍历即可，注意给列表项设置唯一key属性避免React警告：

function DateList() {
  return (
    <div className="container">
      {dateData.map((group, groupIdx) => (
        <section key={`date-group-${groupIdx}`} className="date-group">
          <h3>第{groupIdx + 1}组日期数据</h3>
          <div className="value-list">
            {group.dateValue.map((val, valIdx) => (
              <span key={`val-${groupIdx}-${valIdx}`} className="value-item">
                {val}
              </span>
            ))}
          </div>
        </section>
      ))}
    </div>
  )
}

避坑提示 #

• 做遍历前建议加空值判断，避免接口返回异常、数据未初始化时JS报错，可以用可选链?.简化写法，比如dateData?.map(...)、group.dateValue?.map(...)
• 如果你的列表存在动态增删、排序的交互，不要单纯用索引作为key，优先用数据本身自带的唯一标识字段作为key，静态展示类列表用索引拼接的字符串作为key没有问题

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