React传递props正常调用map()报Cannot read properties of undefined怎么办

核心报错原因 #

• 组件首次渲染阶段，待遍历的数组prop还未完成赋值，默认值为undefined，此时调用map方法直接触发报错。React DevTools捕获的是渲染完成后的最终props状态，控制台打印的引用类型值也会展示最终赋值结果，会掩盖初始阶段的undefined状态。
• prop传递链路存在名称拼写错误，比如父组件传递的prop名和子组件接收的名称不一致，导致子组件拿到的对应值为undefined。
• 对应的state初始值未正确设置为空数组[]，而是默认赋值为undefined或null。

修复方案 #

方案1：给数组prop设置兜底默认值 #

在TrackList组件接收props时直接设置默认值，从根源避免undefined情况：

// 函数组件接收props时设置默认值
const TrackList = ({ tracks = [] }) => {
  // 直接调用map即可，无需额外判断
  return tracks.map(track => <Track key={track.id} {...track} />)
}

方案2：调用map前增加存在性判断 #

如果不想修改props默认值，也可以在渲染时加判断逻辑：

// 可选链写法，兼容ES2020+环境
{tracks?.map(track => <Track key={track.id} {...track} />)}

// 兼容性更高的条件渲染写法
{Array.isArray(tracks) && tracks.map(track => <Track key={track.id} {...track} />)}

方案3：检查state初始化与prop传递链路 #

1. 确认App组件内对应的state初始值设置为[]：

const [searchResults, setSearchResults] = useState([])

2. 逐段检查从App到SearchResults再到TrackList的prop传递名称，确保传递和接收的名称完全一致，避免拼写错误。

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