AI 能写出列表页，但跨页选择、筛选清空这些需求为何一改就崩

事件核心：发生了什么

文章从一个可搜索、可翻页、可勾选的列表页出发，加入“勾选跨页保留，切换筛选条件时清空”这一条新需求后，页面出现三类典型故障：第二页全选框亮着但一条未选；筛选结果已变，批量操作仍带旧数据；连续切换条件后，最终展示的是上一次请求的结果。作者用简化 React 代码逐条拆解原因，给出了一套明确约定：翻页保留选择、全选只作用于当前页、筛选变更时清空选择并回到第一页、提交所有已选 ID。

文章发布于 2026 年 11 月 13 日，原文素材标注阅读时长约 9 分钟，来源为掘金。目前公开信息显示，这是一篇开发者实践总结，并非某个 AI 编程产品的官方公告或评测报告。

为什么重要

AI 编程工具擅长根据自然语言生成“能演示”的页面，但业务规则中大量隐含约定不会自动出现在提示词里。需求没写清的地方，代码也会给出一个答案，只是这个答案未必是业务想要的。文章指出，真正的风险不在于第一版写法错误，而在于新需求改变了原有约定后，状态、请求和界面之间的同步关系开始失效。

这对当前 AI 应用开发有普遍意义：大模型可以加速页面搭建，但跨页选择、并发请求、筛选重置这类交互逻辑，仍需要开发者先把规则写成可验收的条目，再让工具生成或修改代码。

对用户/开发者/创作者的影响

对开发者而言，文章给出了三条可直接落地的思路。其一，全选状态应从当前页记录与已选 ID 集合计算，而非比较两个数组长度。其二，避免为同一事实保存多份 state，选中数量、能否提交等派生值应计算得出。其三，筛选条件变化应视为一次完整状态迁移，在同一条规则下重置页码和选择；异步请求则需要让过期响应失去更新资格，只有当前查询的结果能驱动列表交互。

AI 工具推荐

想把多个 AI 模型放在一个入口？

GamsGo AI 集成 ChatGPT、DeepSeek、Gemini、Claude、Midjourney、Veo 等常用模型，适合写作、绘图、视频和日常 AI 工作流。

了解 GamsGo AI

推广链接：通过此链接购买，我可能获得佣金，不影响你的价格。

对使用 AI 编程工具的产品和创作者来说，文章提醒：验收顺序比功能清单更值得提前写。例如“第一页选 A、第二页选 B 后提交应包含两条”“旧请求后返回不能覆盖新结果”，这些操作序列才是判断 AI 生成代码能否一起工作的依据。

值得关注的后续

一是这类“需求变更后状态失配”的案例，是否会促使 AI 编程工具在生成时主动追问业务约定。二是文章提出的验收表思路，能否沉淀为团队使用 AI 生成前端代码时的通用检查项。三是当业务扩展到“选择所有符合筛选条件的记录”时，客户端 ID 集合方案需要服务端接口配合，相关设计是否会出现更成熟的实践。

来源：juejin