最近在用Cursor写一个企业级后台的表格筛选组件，需求是支持多选、日期范围、模糊搜索联动。我直接描述业务场景（比如“用户选了部门后，日期范围自动清空”），但AI经常生成一些假逻辑或者冗余代码，比如用useEffect监听所有props变化。后来我试过把需求拆成小步prompt，但总感觉少一个“稳定输出”的模板。想问问各位老哥，对于这种带状态依赖的组件，prompt里是应该先写清楚状态流转图，还是直接贴一段伪代码？另外，要不要在prompt里明确禁用某些设计模式（比如禁止用useEffect做数据联动）？求实际踩坑经验。
楼主
1天前
用AI写React组件时，prompt怎么加业务逻辑才不跑偏？
请 登录 后发表回复
全部回复
共 3 条
2楼
1天前
同感，拆小步prompt确实容易丢上下文，尤其是这种状态依赖多的场景。我试过先画个简单的状态机描述（比如“当部门变化时，日期范围重置为空”），再让AI按这个规则写，比直接说业务逻辑稳一些。另外想问下，你试过在prompt里加负面清单吗？比如“不要用useEffect，优先考虑回调函数或派生状态”，感觉能省不少删假逻辑的功夫。
3楼
1天前
这题我太有共鸣了，最近也在用AI写类似的联动组件，简直是一模一样的坑。你提到的“用useEffect监听所有props变化”这个我碰到太多次了，AI特别喜欢无脑塞useEffect，明明有些联动逻辑完全可以用派生状态或者事件回调里直接处理。
我个人的经验是，prompt里明确禁用某些模式确实有效，但得看AI的理解能力。比如我试过直接写“禁止使用useEffect做数据联动，所有状态变化在事件处理函数中同步计算”，效果比单纯描述业务场景好很多。不过有时候AI会矫枉过正，连必要的副作用也省了，所以最好在prompt里把边界条件也写清楚。
关于状态流转图还是伪代码，我倾向后者。因为AI对自然语言的歧义处理还是不行，你写“用户选了部门后，日期范围自动清空”，它可能理解成“部门变化时重置日期”，但没考虑到如果用户同时选了日期和部门，初始加载时要不要联动。我现在的做法是在prompt里直接贴一段类似Zustand或者Redux的reducer逻辑，把状态机画出来，比如：
状态：{ department, dateRange, searchKeyword }
规则：
1. 当department变化时，dateRange清空
2. 当dateRange变化时，department不清空
3. 当searchKeyword变化时，不联动其他字段
4. 所有联动在setter里同步执行，不用useEffect
这样AI生成出来的代码基本一次过，很少出现假逻辑。另外还有个坑是AI经常忘记处理空状态和初始值，我习惯在prompt最后加一句“所有状态变化考虑空值情况，比如部门为null时日期范围保持原样”，能省不少debug时间。
你用的Cursor是哪个模型版本？我发现GPT-4o和Claude 3.5对这种结构化prompt的响应差异还挺大的，Claude更擅长理解业务规则但容易过度设计，GPT则经常偷懒用简单方案。
4楼
20小时前
我之前也遇到过这个问题，后来发现直接把状态流转图画成文字描述丢进prompt效果比贴伪代码好，AI更擅长理解逻辑关系而不是硬编码。另外明确禁止useEffect确实有用，可以改成要求用派生状态或显式事件触发，这样生成的代码干净很多。不过小步prompt还是得用，只是每个步骤里要把“当前状态”和“触发动作”写死，不然它容易自作主张加监听。