React中遍历嵌套数组后item.name无法显示，如何修正？

你的代码里用value.forEach()遍历数组，但forEach没有返回值，React无法渲染它的结果，所以页面上看不到item.name。把forEach换成map就能解决问题——map会返回一个元素数组，React可以直接渲染这个数组。

另外注意：循环生成的React元素需要唯一的key属性，用item.id比cuid()更合适，因为cuid()每次渲染都会生成新值，会触发不必要的组件重渲染。

修正后的代码：

Object.entries(data).map(([key, value]) => (
  <Grid item key={key} lg={4} sm={6} xs={12}>
      <Typography variant="subtitle1">{key}</Typography>
      {value.map((item) => (
            <Typography key={item.id} variant="subtitle1">{item.name}</Typography>
      ))}
  </Grid>
))

关键改动说明 #

• 将value.forEach()替换为value.map()，让React能获取到要渲染的元素数组
• 给内层Typography添加key={item.id}，保证每个元素的key唯一且稳定
• 外层Grid的key直接用key={key}即可，原对象的键（1、2）本身就是唯一标识

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