用AI写React组件时，prompt怎么加业务逻辑才不跑偏？

我都是先写死状态流转表再写代码，效果比贴伪代码稳，禁useEffect那条太对了。

直接贴状态流转图比伪代码稳，再明确写“禁止useEffect做联动”，否则它真能给你整出花活。

直接贴伪代码比画状态图管用，我还会加一句“别用useEffect联动，用事件处理”，亲测少很多假逻辑。

状态流转图比伪代码管用，但我会直接在prompt里禁掉useEffect联动，逼它用事件回调处理依赖。

我之前也踩过这个坑，后来发现光贴伪代码不够，得把状态流转写成类似“选部门→清空日期→触发筛选”这种箭头链条，AI才不容易瞎编。禁用模式确实有用，我直接在prompt里写“不要用useEffect做联动，用事件回调”，生成质量明显稳了。不过有些复杂联动还是得自己拆成两个组件，让AI分别写再拼起来。

这个问题我太有感触了，之前用Copilot写一个带联动的表单，AI也是疯狂给我塞useEffect，最后代码review的时候被同事吐槽说像在写副作用大全。我的经验是，状态流转图比伪代码管用，因为伪代码AI容易脑补出你没写的分支，但画个简单的状态图（哪怕是用文字描述A状态→B状态→C状态）它反而能收敛很多。另外禁用useEffect这个思路我试过，确实有效，但得说清楚替代方案，比如“用事件处理函数或派生状态代替副作用监听”，不然AI会给你换成useMemo乱算一通。还有个坑是，别在prompt里写“自动清空”这种模糊词，AI理解不了触发时机，得写成“当部门字段的onChange触发后，把日期范围的state重置为初始值”。我现在的习惯是先让AI生成一版，然后自己手动把多余的useEffect删掉，再反哺回prompt里当例子，这样迭代两三次基本就稳了。

我一般会把状态流转写成类似伪代码的注释块塞进prompt里，比如“选部门 → 清空日期 → 重置页码”，这样比纯文字描述稳很多。禁用useEffect做联动这个思路我试过，但得留个口子，不然它连必要的副作用都不写了。其实更管用的是直接给几个“反例”告诉它别这么干，比抽象禁止有效。

刚入门，这个对我帮助很大。

我一般不会先画状态流转图，那玩意儿写出来AI也未必照着走，反而容易让它把简单逻辑搞复杂。更管用的是直接给一段极简伪代码，把状态字段和触发条件写死，比如“department变化时只清空dateRange，不动searchText”，这样它就不会自作主张加一堆联动。禁用useEffect这个思路我也试过，确实有效，但得说清楚替代方案，不然它转头就用useMemo或者useCallback硬凑，反而更绕。我现在习惯在prompt尾巴上加一句“所有状态变更只在事件处理函数里做，不要用副作用监听props”，命中率能高不少。至于冗余代码，可能跟Cursor默认喜欢补全防御性逻辑有关，我有时会明确说“不需要错误边界和loading态，先给最小可用版本”。还有个歪招是把现有组件代码贴进去当风格锚点，比纯文字描述稳得多。