React组件调用map时报Cannot read properties of undefined (reading 'map')错怎么办

• 首次渲染时childs值为undefined
  你遇到的报错本质是调用map方法的目标值为undefined。你在控制台看到的数组是引用类型的延迟求值结果：浏览器控制台打印对象/数组时，保存的是引用指针，你点击展开时才会读取当前最新的值，而不是打印时的初始值。
  实际你的组件首次渲染时，childs还没有拿到异步加载的人员数据（比如从接口请求、父组件异步状态更新而来），此时childs为undefined，直接调用map就会触发报错，后续props更新后childs才变成你看到的12项数组。
  你可以把打印语句改成console.log(JSON.stringify(childs))，就能看到首次渲染时输出的是undefined，验证这个问题。
• props传递错误
  检查父组件调用Testt组件时，传递的props名称是否和子组件接收的childs完全一致，有没有拼写错误（比如误写为children/child），或者传递的变量本身在某些分支逻辑下会被赋值为undefined。

任选以下一种方案即可修复问题：

• 给子组件的childs参数设置默认空数组
  解构props时直接赋值默认值，哪怕childs未传递也不会出现undefined：

  export const Testt = ({ childs = [] }) => {
    console.log(childs)
    // 注意map遍历的元素必须加唯一key属性，避免React抛出警告
    return childs.map((element, index) => (
      <div key={index}>
        zdijiziojzadioj
      </div>
    ))
  }
  

• 使用可选链做安全判断
  调用map前加可选链运算符?.判断值存在后再执行，值不存在时返回空占位：

  export const Testt = ({ childs }) => {
    console.log(childs)
    return childs?.map((element, index) => (
      <div key={index}>
        zdijiziojzadioj
      </div>
    )) ?? null
  }
  

• 父组件侧加渲染拦截
  父组件等childs加载完成后再渲染Testt组件：

  {/* 父组件调用Testt的位置 */}
  {Array.isArray(childs) && <Testt childs={childs} />}
  

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