列表渲染 undefined 报错定位与修复
贴上报错与代码,帮你定位问题根因、给出修复方案并解释原因。
适用场景
- 线上偶发白屏,日志只留一行 undefined,需要快速定位触发条件
- Code Review 看到模板直接遍历接口数据,拿它当反例讲清为什么危险
- 新人第一次接接口联调,先按它的排查顺序走一遍
PROMPT
这个功能上线前,控制台报 Cannot read property 'map' of undefined,堆栈指向商品列表组件的渲染函数,页面直接白屏。手上有组件源码与接口返回样本,今天要交出一份定位结论。 【计划】 1. 第一步查接口返回:确认 /api/goods 的响应体是否为 null,标准是拿到一次真实响应。 2. 第二步查赋值路径:确认 onMounted 里是否直接赋值,标准是定位到具体一行。 3. 第三步查模板遍历:确认模板是否直接调 map,标准是找到遍历表达式。 4. 第四步出结论与修复:给唯一根因与改动行号,标准是 diff 能直接应用。 【执行】 1. 证据一:接口偶发返回空 body,响应体为 null,赋给列表变量后不再是数组。 2. 证据二:onMounted 里没有兜底,变量被直接赋成 null 或 undefined。 3. 证据三:模板直接写 map,既没有可选链,也没有给初始空数组。 4. 结论:根因是接口返回 null 时没兜底,触发条件是空 body 或 data 写成 null。 【回改计划】 1. 偏离点落在第三步:模板不是唯一触发处,赋值处同样要改,原计划漏了这步。 2. 更新后计划:修复改为两处,赋值处兜底成空数组,模板处补默认值,其余不变。 3. 补一条隐藏问题:请求没有 catch,接口报 500 会静默白屏,需一并补错误态。 4. 验证方式:本地把接口 mock 成空 body 与 null,各刷三次都不白屏。
复制后直接粘贴到模型使用