React项目TypeError: props.items is undefined报错如何排查解决

问题根因 #

你遇到的报错不是JSX语法问题，核心是父子组件传递的props属性名不匹配。

报错含义解释 #

TypeError: props.items is undefined 指的是Users组件中尝试访问props.items属性时，该属性不存在，后续调用.map()方法自然会触发类型错误。

不匹配点说明 #

你在父组件中调用Users组件时，传递的属性名为userData：

<Users userData={userDB} />

但在Users组件内部读取的属性名为items，二者名称完全不一致，自然无法拿到预期的数组数据。

解决方案 #

二选一即可：

• 修改父组件传参属性名，和子组件读取的名称对齐：

  // 父组件中修改为
  <Users items={userDB} />
  

• 修改子组件读取属性名，和父组件传递的名称对齐：

  // Users组件中修改为
  {props.userData.map((user) => (
  

优化建议 #

可以给属性加空值兼容逻辑，避免后续偶发空值导致页面直接崩溃：

// 方式1：使用可选链，值为空时不执行map
{props.items?.map((user) => (

// 方式2：解构props时给默认值
function Users({ items = [] }) {
  return (
    <ul>
      {items.map((user) => (

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