React.js报TypeError: Cannot read property 'category' of undefined如何解决

报错原因 #

这个TypeError: Cannot read property 'category' of undefined报错的直接原因是运行时你的activity变量为undefined，代码直接访问了它的category属性。
问题既和React属性传递的运行时特性有关，也和代码缺少空值兼容逻辑有关：

• TypeScript的接口类型校验仅在编译阶段生效，不会限制运行时的props实际值，哪怕你声明了activity是必填的Activity类型，只要父组件传递了undefined的activity，运行时就会报错
• 常见的触发场景包括：父组件的activity是异步请求获取的，初始值为undefined，请求返回前就渲染了该组件；父组件传参时漏传、错拼了activity属性；数据处理逻辑异常把activity赋值为undefined

修复方案 #

方案1：父组件加渲染守卫（最推荐） #

父组件渲染ActivityDetails时先判断activity是否存在，存在才渲染组件，从源头避免空值传入：

// 父组件调用位置示例
{activity && <ActivityDetails activity={activity} cancelSelectActivity={cancelSelectActivity} />}

方案2：组件内用可选链做空值兼容 #

不需要修改父组件逻辑，直接在组件内用可选链处理空值，配合默认占位图兜底：

interface Props {
  activity: Activity;
  cancelSelectActivity: () => void;
}

export default function ActivityDetails({
  activity,
  cancelSelectActivity,
}: Props) {
  return (
    <Card fluid>
      <Image src={activity?.category ? `/assets/categoryImages/${activity.category}.jpg` : '/assets/categoryImages/default.jpg'} />
    </Card>
  );
}

方案3：给组件props加默认值兜底 #

把activity设为可选属性，同时设置默认值，避免空值报错：

interface Props {
  activity?: Activity; // 修改为可选属性
  cancelSelectActivity: () => void;
}

export default function ActivityDetails({
  activity = { category: 'default' } as Activity, // 加默认值兜底
  cancelSelectActivity,
}: Props) {
  return (
    <Card fluid>
      <Image src={`/assets/categoryImages/${activity.category}.jpg`} />
    </Card>
  );
}

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