① 输入长这样
报错信息
TypeError: Cannot read properties of undefined (reading 'map')
at renderList (list.js:42:18)
at HTMLDivElement.dispatch (app.js:9:1)
相关代码
async function load() {
const res = await fetch('/api/items');
renderList(res.data.items); // ← 报错在这行附近
}
function renderList(items) {
return items.map(i => i.name).join(',');
}
环境信息（可选）
Chrome 131
② 输出长这样
预跑示例 · 已缓存人话解释
items 是 undefined，所以调 .map() 的时候崩了。也就是说 res.data.items 这一串里，某一层是空的。
按可能性排序的原因
- 接口返回的不是这个结构（最常见）：
fetch拿到的res是响应对象，不是数据； 要先await res.json()，然后再取json.data.items。 - 字段名不一致：后端可能返回
list/records而不是items。 - 接口出错但没处理：后端 500 或返回错误对象，
data层不存在。
怎么验证（按顺序，1 分钟能定位）
- 在
renderList前加一行：console.log(res, await res.clone().json())—— 先看清真实结构； - 打开浏览器 Network 面板，找到
/api/items，看响应体到底是数组还是{code, data:{list}}； - 如果确实是第 1 类原因，改成
const json = await res.json();+renderList(json.data?.items ?? [])。
最小修复
const res = await fetch('/api/items');
const json = await res.json(); // ← 关键：先解出 JSON
renderList(json?.data?.items ?? []); // ← 兜底空数组，没数据也不崩
同类坑
res.data是 axios 的写法，用原生fetch时没有这一层（两者混用最容易出这个错）；- 加上
?? []只是不让它崩，真正的问题仍要查清——空数组会把接口异常掩盖成「没有数据」。
这是官方预跑的示例结果，不含你的任何内容；换成你的数据请见下方。
③ 换成你的信息
运行要用你自己的内容调一次 AI，所以需要登录（登录免费）。登录后余额为 0，会被引导开通 VIP1 探索者（100 元/年 = 12000 积分）。积分按实际用量扣，每步跑完才结算。
登录后运行 →④ 配方原文
完整提示词仅 VIP 会员可见；开通后可直接复制，一键套用到任意 AI 工具。
你是帮人排查程序问题的资深工程师。请根据报错与代码给出诊断。 要求： 1. 先用**人话**解释这个报错到底在说什么（一句话）。 2. 列出最可能的 2~3 个原因，**按可能性排序**，每个原因要指向代码里的具体行/字段。 3. 给出一段「怎么验证」的步骤：用最少几步就能确认 …
⑤ 实践中的坑
- !只贴一行报错信息，得到的往往是"可能是 A 也可能是 B"；把栈的前几行一起贴上，命中率高得多
- !代码贴「出问题的那一段」比贴整个文件好——整文件会让它把注意力分散到无关的地方
- !它给的修复要自己跑一遍再提交；尤其是涉及数据兜底（?? []）的改动，容易把真问题盖住
⑥ 常见问题
它能直接帮我改好项目里的代码吗？ ＋
它只给「最小修复」的建议片段；实际改动、回归测试仍要你自己做，别不看就提交。
会不会瞎编不存在的 API？ ＋
提示词里明确要求「不确定就写需要你确认」；但涉及较冷门的库时仍可能记错，要对着官方文档核一遍。
前端后端报错都行吗？ ＋
都行。把语言、框架和版本写进「环境信息」能明显提高准确率。