Redux请求API渲染时出现Cannot read properties of undefined (reading 'map')错误怎么解决

问题根源 #

你遇到的Cannot read properties of undefined (reading 'map')报错有两个核心原因：

• 接口返回值处理错误：你调用的目标接口直接返回卡通列表数组，不存在data层级字段。你代码中dispatch(cartoons_are_loaded(json.data))取到的json.data实际为undefined，会把Redux中初始为数组的cartoons覆盖为undefined，后续调用map方法自然报错。
• 缺少防御性判断：代码中没有对cartoons的类型做兜底校验，只要cartoons不是数组，访问length属性、调用map方法都会触发报错。

修复步骤 #

1. 修正接口数据取值逻辑，将cartoons.js中dispatch的入参改为直接返回的json数据：

// 原代码：dispatch(cartoons_are_loaded(json.data))
dispatch(cartoons_are_loaded(json))

2. 给cartoons加兜底默认值，避免取值异常时出现undefined：

// 原代码：let cartoons = useSelector(({cartoon_reducer: {cartoons}}) => cartoons);
let cartoons = useSelector(({cartoon_reducer: {cartoons}}) => cartoons ?? []);

3. 渲染时添加可选链操作符，避免运行时报错：

// 原代码：{cartoons.map(el => <div key={el.id}>{el.title}</div>)}
{cartoons?.map(el => <div key={el.id}>{el.title}</div>)}

可选优化 #

给useEffect添加cartoons依赖项，避免ESLint语法警告：

useEffect(() => {
   if (!cartoons.length){
       fetchCartoons();
   }
},[cartoons])

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