问题场景
"我用 Cursor 生成了一段 React 组件。本地跑得好好的，上线就报错。查了半天AI 把 useEffect 的依赖数组写错了造成死循环。" “Copilot 帮我写了一个表格组件。看起来没问题，结果客户反馈表格不更新数据…，”
如果你也在用 AI 辅助写前端代码，多少都遇到过差不多“AI 幻觉 bug”。整理了10个最常踩的坑，还有如何快速定位和修复它们。
坑：React useEffect 依赖数组遗漏
现象
AIGenerated 代码：
function UserProfile {
const = useState;useEffect => {
fetch
.n)
.n;},)，// ⚠️ AI 漏掉了 userId
}
页面首次加载正常，但切换使用者后数据不变。在 React 严格模式下跑两遍后才暴露。
原因
Ai 经常把
修复
useEffect => {
fetch
.n)
.n;},)，// ✅ 补上 userId
进阶方案：使用 @tanstack/react-query/swr/自定义 hook 替代原始 useEffect。AI 很容易给出带缓存的请求方案，比手动管理依赖更安全。
坑：CSS 类名冲突
Tailwind 的 "flex items-center" 正常工作，但自定义 CSS Module 的类名未被注入——因为 AI 把 CSS Modules 的 {styles.cardContainer} 写成字符串。
Ai 在同一文件中混用了全局 CSS、Tailwind 和 CSS Modules，却未按项目规范统一。它根据见过的各种代码推断“这样写应该可以”，但在 CSS Modules 项目里直接字符串不会被转换为哈希类名。话说回来，
// ✅ 统一使用 CSS Modules
import styles from './UserProfile.module.css';
-
Cascading Style System： 项目用 Tailwind → 告诉 Ai “只用 Tailwind，不要自定义类”。其实，
-
Cascading Style System：项目用 CSS Modules → 用
{styles.xxx} 方式引用。
-
Cascading Style System：项目用 CSS-in-JS → 明确指定 styled-components 或 Emotion。
-
Cascading Style System：所有人都遵守项目规范，可到无效类名。
坑：TypeScript 类型断言滥用
#🤦♂️ 城门失火，殃及池鱼
const data = response.data as any;const items = data.items.map => ({
...item,label: item.name?，'',}));整段代码变成无类型保护状态，以后任何人开发时 IDE 全部变为 `any`。A i 调整目标是“代码能跑”，而不是“类型安全”。当遇到类型错误时它会可以优先考虑成本最低的方案——`as any`。tsx
interface ApiResponse{
至于code，number;data:T，}
interface Item{
id的观点是，string;name:string，}
function isItemArray:data is Item{
return Array.isArray && data.every;
}
const result:ApiResponse- = response.data;if) throw new Error;**提示词技巧**：在 prompt 中加上 “严禁使用 `as any`，必须完整声明类型”。
坑：状态更新依赖旧值
现象
tsx
function Counter{
const =useState;const handleClick==>{
for{
setCount;// ⚠️ 每次都是 count+ i
}
};}
点击后 `count` 成为 `10` 而不是预期 `15`。
原因
A i 不理解 React 状态更新闭包陷阱和批处理机制；怎么说呢，它以直觉方式写 “每次加 i”，每次都是基于同一旧值。
修复
tsx
const handleClick==>{
for{
setCount;}
}，同理可适用于 `useReducer` 或 Vue 的 `ref/reactive`。
坑：错误处理——“只要不报错就算成功”
现象
tsx
async function loadData{
try{
const res=await fetch;话说回来，const json=await res.json;setData，}catch{
console.error;}
}
虽然网络异常会被 catch。但 HTTP 错误码不会抛出异常，被当作成功处理。
原因
A i 对 HTTP 错误码认识不足；训练数据中多是 `.n.catch` 简单写法，没有强调 `res.ok` 检查。
修复
tsx
async function loadData{
try{
const res=await fetch;if throw new Error;const json=await res.json;按理说，if throw new Error;setData，}catch{
toast.error;}
}
要点
| PITFALLS
坑位 | Ai 常见错误 | SOLUTION 修复方案 | PROMPT 提示词可预防 |
\
\
\
| 主要建议： | \
\
\
-
Ai 写出的代码必须逐行 review
\
-
PROMPT 时明确约束
\
-
= 使用 ESLint + TypeScript strict 模式自动拦截低级错误
\
-
Ai 擅长生成样板代码，但业务逻辑与边界请自己把关！
\
-
Ai 是加速器，而非代驾—关键时刻你才是方向盘主导者 🚗
\
<\/ul>
\
<\/td>
\
<\/tr>
\
\
| React useEffect
依赖漏掉或乱写
补全依赖 / 改用 SWR/React‑Query
✅ “考虑所有响应式依赖”
CSS 冲突混用多种样式方案统一规范、
使用 CSS Modules
✅ “严格遵循项目 CSS 规范”
类型安全滥用 as any 定义接口/类型守卫
✅ “严禁使用 any”
状态更新依赖旧值、闭包陷阱 函数式更新 / useReducer需要人工审查
错误处理只 catch 不检查状态码
检查 res.ok + 状态码 ✅ “处理4xx/5xx”' \
style='text-align:left;'>
| ① 未列入外部变量导致死循环
② Tailwind+自定义样式冲突
③ TypeScript 忽略安全
④ 状态闭包导致累计错误
⑤ HTTP 错误未捕获
| ① 在 prompt 中加入 “ ” 强制列入外部变量；② 切换至统一风格，如 Tailwind+CSS‑Modules；③ 定义接口并使用类型守卫；④ 使用函数式更新或 reducer；⑤ 手动检查 res.ok 并抛出业务异常
| ① 指明需要完整响应式列表，例如 “”；② 指定仅使用 Tailwind 或仅使用 CSS‑Modules；③ 禁止任何 as any 并声明完整接口；按理说，④ 明确要求函数式更新或 reducer；⑤ 加入 “检测 HTTP 状态” 等关键词
|
\t\t\t\t\t\t\t\t\t\t
|
|
