React-Redux应用出现TypeError读取undefined的id属性错误求助

这个报错的核心原因是组件在API数据加载完成前就开始渲染了：初始状态下Redux中的journeymen可能是undefined，或是数组内存在undefined项，导致调用map时访问journeyman.id触发报错。而关闭错误窗口后，API请求已完成，状态更新为有效数据，组件重新渲染就能正常显示内容。

具体解决方案： #

1. 给Redux状态设置初始空数组

在管理journeymen的reducer里，把初始状态设为空数组，避免初始值是undefined：

const initialState = {
  journeymen: [],
  // 其他相关状态
};

2. 渲染前添加空值校验

在组件中，确保journeymen是有效数组后再执行map，同时过滤数组内的无效项：

{journeymen?.filter(Boolean).map((journeyman) => (
  <SwiperSlide key={journeyman.id} >
    <Link to={`/journeymen/${journeyman.id}`} className="text-decoration-none">
      {/* 卡片内容 */}
    </Link>
  </SwiperSlide>
))}

也可以添加加载状态提示，提升用户体验：

{journeymen && journeymen.length > 0 ? (
  journeymen.map((journeyman) => (
    <SwiperSlide key={journeyman.id} >
      {/* 卡片内容 */}
    </SwiperSlide>
  ))
) : (
  <div className="text-center mt-5">加载中...</div>
)}

3. 用可选链操作符做兜底（临时方案）

如果不想修改状态初始化逻辑，可以在访问属性时使用可选链，避免直接访问undefined的属性：

<SwiperSlide key={journeyman?.id} >
<Link to={`/journeymen/${journeyman?.id}`} className="text-decoration-none">

注意：这个方法仅用于临时规避报错，建议优先用前两种方案从根源解决问题——因为key为undefined可能会触发React的警告。

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