React中map遍历嵌套数组报错：Cannot read properties of undefined

错误Cannot read properties of undefined (reading 'map')的核心原因是**projects.tech为undefined**，无法调用数组的map方法。以下是具体排查和解决方向：

一、检查数据完整性 #

你的示例对象里有tech数组，但实际props.projectArray中可能存在部分项目对象：

• 缺少tech属性
• tech的值是null或undefined而非数组

解决办法：

• 数据层面：确保每个项目对象都包含tech字段，哪怕是空数组[]
• 代码层面：添加容错处理，避免直接调用map：

  // 方式1：可选链+空值合并，确保始终是数组
  {projects.tech?.map((techno) => (
    <ThumbTech key={techno}>{techno}</ThumbTech>
  )) ?? []}
  
  // 方式2：先判断存在性再调用map
  {projects.tech && projects.tech.map((techno) => (
    <ThumbTech key={techno}>{techno}</ThumbTech>
  ))}
  

二、处理异步加载的边界情况 #

如果props.projectArray是通过接口异步获取的，初始渲染时projectArray可能是undefined，或者部分项目数据还未加载完成，导致tech未定义。

解决办法：

• 给projectArray设置默认空数组：

  // 函数组件中解构props时设置默认值
  const ProjectComponent = ({ projectArray = [] }) => {
    // ...渲染逻辑
  }
  

• 或者在渲染外层数组时也添加可选链：

  {props.projectArray?.map((projects) => {
    // ...内部渲染
  })}
  

三、优化key的使用 #

你当前用uuidv4()生成ThumbWrapper的key，每次组件渲染都会生成新的key，会触发不必要的组件重新渲染，影响性能。建议改用项目的唯一标识作为key，比如：

<ThumbWrapper key={projects.name}>
  // ...内部元素
</ThumbWrapper>

如果项目有id字段，用projects.id会更可靠。

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