React组件报Cannot read properties of undefined (reading 'filter')错误原因是什么

报错原因 #

该错误的核心是组件首次渲染时props.squads的值为undefined，打印能看到有效值是两个渲染时序特性导致的错觉：

• 若squads来自父组件的异步请求返回值，组件首次渲染时请求尚未完成，父组件会传递undefined作为squads参数，请求完成后才会传入正确数组触发二次渲染
• 浏览器控制台打印引用类型（数组/对象）时，展示的是用户点击展开时的实时值，而非打印时刻的快照，因此只能看到二次渲染后的有效值，掩盖了首次渲染时undefined的情况

解决方案 #

任选以下一种方式修复即可：

1. 组件参数解构时设置默认值
   直接给squads赋默认空数组，无有效值传入时也不会触发报错：

const Weekly = ({ squads = [], weekNo }) => {
  // 其余逻辑保持不变
}

2. 调用方法前添加值校验
   使用可选链操作符或者条件渲染兼容异常值：

// 可选链写法：squads为undefined时直接终止调用，不会报错
{squads?.filter((squad) => squad.division === "NFC North").map((filteredSquad) => (
  <li>{filteredSquad}</li>
))}

// 条件渲染写法：仅当squads存在时才执行后续逻辑
{squads && squads.filter(...).map(...)}

3. 父组件传参时统一兜底
   父组件传递squads参数时统一处理为空数组，避免传入undefined：

// 父组件调用示例
<Weekly squads={squads ?? []} weekNo={weekNo} />

额外提示 #

当前代码中map直接返回squad对象作为子元素渲染，后续会触发React「对象不能作为合法子元素」的警告，建议指定要渲染的具体字段，例如{filteredSquad.name}。

内容的提问来源于stack exchange，提问作者John G.