Debug 调试

列表渲染 undefined 报错定位与修复

贴上报错与代码,帮你定位问题根因、给出修复方案并解释原因。

发布于 2026-10-09 21:03:45 浏览 18

适用场景

  • 线上偶发白屏,日志只留一行 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,各刷三次都不白屏。
复制后直接粘贴到模型使用
标签 调试前端Vue3