React使用map遍历嵌套数组提取Status值返回undefined如何解决

错误原因 #

• 你的原始数据中Info本身是数组，数组本身没有minsuInfo属性，直接调用Info.minsuInfo会返回undefined，是第一个报错原因
• minsuInfo、dailyValue均为嵌套数组，无法直接通过点语法访问数组元素的属性，需要逐层遍历所有层级的数组元素才能提取到所有Status值

修复代码 #

可以使用flatMap实现遍历+自动扁平化，直接得到一维的Status结果数组：

const apple = Info.flatMap(infoItem => 
  infoItem.minsuInfo.flatMap(minsuItem => 
    minsuItem.dailyValue.map(dailyItem => dailyItem.Status)
  )
)
// 此时打印apple就是你预期的 ["20%", "40%", "40%", "15%", "60%", "10%", "40%", "55%"]

如果需要兼容不支持flatMap的环境，也可以用map+flat组合实现：

const apple = Info
  .map(infoItem => infoItem.minsuInfo.map(minsuItem => minsuItem.dailyValue.map(item => item.Status)))
  .flat(3) // 数字3代表扁平化的深度，和你的数组嵌套层数一致即可

渲染示例 #

渲染时可以用join方法把数组转成空格分隔的字符串展示：

return (
  <div>
    <p>{apple.join(' ')}</p>
  </div>
)

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