AI 写的 React 代码不稳怎么办？react-doctor 检查教程

AI 刚补完一个筛选面板，页面能打开，按钮也能点，但代码里同时出现了派生状态、层层传参和不稳定的列表 key。人工评审若只顺着功能走，很容易把这些问题带进下一轮迭代。React Doctor 的价值，是先用确定性规则把可定位的 React 风险筛出来，再把结果交还给人和 AI 修正。

按钮能点，不等于代码可靠

生成式工具擅长快速拼出组件，却不一定理解仓库长期约束。它可能用 useEffect 把本可在渲染阶段计算的值再写入 state，也可能漏掉可访问性属性、留下未使用代码，或把敏感信息带到客户端。静态扫描能抓住符合规则的问题；若缺陷只在特定账号、并发请求或后端数据下出现，扫描不会替代运行时测试。

扫描器实际在看什么

React Doctor 会从状态与 Effect、性能、架构、安全、可访问性等方向检查 React 代码，并给出规则名、严重级别、文件行号和说明。规则输出稳定，适合让 AI 按编号逐项处理；若团队约定与默认规则不同，不能因为工具报错就机械改代码，应在配置中调整规则或忽略范围。

把一次诊断变成修复回路

npx react-doctor@latest --verbose --scope changed

先在项目根目录运行这条命令，只看当前分支相对基线新增的问题。把规则、路径和行号交给 AI，要求它解释原因、做最小修改，再执行同一条命令并跑类型检查、测试和构建。若直接把整份报告丢给 AI，它可能顺手重构无关文件；限定“只修本次新增项”能缩小偏航范围。

拿派生状态做一次小测试

例如 AI 为 fullName 新建 state，再用 Effect 根据姓名字段同步它。诊断若指出派生状态问题，可要求 AI 改成渲染时计算，并说明为何少了一次同步和额外渲染。修改后同时重跑扫描与组件测试；如果界面依赖手工覆盖的 fullName，直接删除 state 会破坏业务，这正是静态结论需要人工核实的地方。

它不会替你做的判断

分数不是产品质量总分。交互是否符合业务、接口失败后如何恢复、权限是否正确、视觉是否走样，仍需测试与评审。扫描也可能受生成文件、特殊框架封装或单仓多项目边界影响；遇到结果异常，应先确认项目目录、扫描范围和配置，而不是用批量禁用规则消掉红字。

安全分类也不等于完整安全审计：规则能提示进入客户端的敏感值或危险写法，却无法判断服务端授权是否与业务角色一致。把“没有命中规则”当成“没有漏洞”，会留下检测范围之外的空白。

给 AI 加一道交付条件

适合的约束是：改动前记录一次结果，改动后运行 --scope changed，新增 error 必须清零，warning 逐条说明取舍，再附上测试结果。需要接入其他系统时可用 --json 或 --json-out；只采集机器数据而不核对真实行为，仍可能得到一份“报告干净、功能有错”的提交。