React中map报undefined错误及Props传参问题排查

核心报错原因 #

报错本质是三类低级错误叠加，和React Props深层机制无关：

• Props命名不匹配：父组件传参时使用的prop名为dropdown_information，子组件解构时写的是informationPieces1，两边命名完全不一致，子组件首次渲染时无法读取到对应传值，拿到的是undefined
• 内部变量拼写错误：子组件解构的变量名是复数形式informationPieces1，调用map时写的是单数形式informationPiece1，变量名不匹配直接触发未定义错误
• 初始状态缺失+渲染时序问题：父组件的major状态未给对应数组字段设置初始值，组件首次渲染发生在用户点击提交、接口返回数据之前，此时读取major下的对应字段值为undefined，传入子组件后直接调用map就会抛出类型错误。控制台能打印出目标数组是因为接口返回后状态更新触发重渲染，此时props已经更新为目标数组，但首次渲染抛出的错误已经阻断了正常渲染流程。

分步排查修复步骤 #

• 第一步：全链路对齐命名，消除拼写错误
  统一父组件传参、子组件解构、子组件内部调用的变量名，三处命名必须完全一致：
  父组件调用Dropdown处，将传参名改为和子组件解构名匹配：

  <Dropdown informationPieces1={major.informationPieces1}/>
  

  修正子组件内部map调用的变量名，和解构出的变量名保持一致，同时修正错误的标签闭合写法、不符合HTML规范的标签嵌套：

  const Dropdown = ({informationPieces1}) => {
    return (
      <ul>
        {informationPieces1.map((piece, index) => {
          return (
            <li key={index}>
              <h1>{piece.name}</h1>
            </li>
          )
        })}
      </ul>
    )
  }
  

• 第二步：补全初始值，增加空值兜底
  父组件定义major状态时，给数组字段设置初始空数组，从源头避免首次渲染时值为undefined：

  const [major, setMajor] = useState({
    // 其余major相关字段按需设置初始值
    informationPieces1: []
  })
  

  子组件渲染列表时增加空值兜底，即使上游传值异常也不会触发类型报错：

  {(informationPieces1 ?? []).map((piece, index) => {
    // 列表渲染逻辑同上
  })}
  

• 第三步：渲染结果验证
  修复完成后打开React开发者工具，选中Dropdown组件查看两个渲染阶段的props值：首次渲染时对应数组字段为空数组，无undefined值；接口返回、状态更新后props自动更新为拉取到的目标数组，列表正常渲染，不再抛出map相关类型错误。

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