Taro 车型筛选复盘：筛选项与查询参数必须闭环

本文基于 2026-10-15 获取的一份个人多端消费应用默认分支源码做静态审阅，只聚焦车辆目录页的筛选状态与网络请求。文章不保留产品名、仓库路径、服务地址、业务数据或配置值，也没有修改源仓库。未运行小程序开发工具、构建或线上接口，因此下文记录的是源码可确认的行为和待运行态验证的请求竞态。

多端入口集中管理

应用用 Taro 配置集中声明页面路由、底部 tab 和导航栏，例如车辆目录页 pages/moto/index，再由同一套 React 页面承载车辆、配件、服务、活动、登录和清单等流程。这种入口适合多个小程序平台复用，但“同一份源码”不代表每个平台行为完全相同：页面栈、tab 跳转、存储、导航栏、授权和请求域名都有平台差异。路由表应视为平台适配契约，新增页面时同时检查目标平台构建、tab 页面跳转规则与深链回退，不能只在 H5 预览通过就认为小程序交付完成。

草稿与已应用条件分开

目录筛选包含价格、排量、里程、马力、年份、分类、车况、来源、过户次数、无事故和年检状态。打开面板时，页面将当前条件复制到 tempFilter；用户在面板里编辑草稿，点击应用后才复制为已生效的 filter。已应用条件标签从 filter 派生，避免还没确认的草稿提前出现在目录摘要中。这种“编辑态/查询态”分离很适合多条件移动筛选器，取消操作也应保留旧查询，重置草稿则不应误清空已生效条件。

范围输入先保留用户正在编辑的字符串，失焦时再转成数字并校验上下界。这里要明确空字符串、0、最大值和单位换算的语义；最小值高于最大值时应保留可理解的错误状态，不要静默改写用户输入。字符串输入层、FilterState 和 API DTO 最好各自有明确转换函数，避免把输入过程中的半成品数字直接塞进请求模型。

UI 选项和 API 参数没有闭环

源码中的 FilterState、重置判断与筛选标签都包含过户次数 transfer、无事故 accidentFree 和年检有效 hasInspection。不过，构造请求的 buildApiParams 只写入价格、排量、里程、马力、年份、车况、来源和分类，没有把这三个条件转换成任何 API 参数。请求成功后，页面直接用响应的 list 替换目录数据；没有在客户端再按这三项过滤列表。因此当前三种控件可以改变选中态和标签，却不会改变实际返回的车辆集合。这是本次审阅确认的功能缺陷，不需要假设后端实现才能从前端代码定位。

修复时先与服务端确认字段名、枚举和值域，再让单一的查询序列化函数覆盖每一个可见控件；如果后端暂时不支持，应隐藏或禁用对应筛选，并明确说明，而不是显示一个看似已生效的条件。可以用字段映射表驱动 UI、标签和 API DTO，也可以手写显式转换，但需要防止新增 FilterState 字段后漏掉查询序列化。负向测试应断言每个选中条件都生成预期参数，默认条件不产生多余参数。

结果数与目录请求需要竞态保护

面板打开时会按临时筛选请求结果总数，并把 pageSize 改为 1；面板内每次草稿变化都会触发这个请求。用户快速输入范围或连续切换选项时，请求可能多次并发，较早发出的响应也可能晚于新条件返回，覆盖较新的结果数。正式列表则通过依赖筛选、关键字和排序状态的 effect 重新请求，并直接写入 list/total；同样需要确认旧响应不会覆盖最新查询。

可用 debounce 降低预览计数请求频率，再给每次查询附加递增序号或 query key，只允许当前序号更新状态；网络层若支持取消，也应在条件变化和页面卸载时终止旧请求。加载状态不能由一个共享布尔值被多个请求随意开关，否则旧请求提前结束会让新请求显示成空闲。错误状态也应区分“没有匹配结果”和“请求失败”，筛选面板的计数失败不能被展示成结果数为 0。

建议的验收矩阵

1. 对每一个可见筛选项选一个非默认值，断言生成的查询参数包含对应字段和值；过户、事故和年检是本次必须加入的回归项。
2. 组合多个条件、关键字、排序和重置，检查默认值移除、字段名、边界、空值和 URL 编码保持一致。
3. 给多个筛选计数和列表请求设置反向完成顺序，确认旧响应不能覆盖最新条件，也不能提前关闭新请求的 loading。
4. 慢网、断网、失败重试和无匹配数据分别显示独立状态；面板取消不得意外应用草稿。
5. 在 H5 及每个目标小程序平台验证数字输入、滚动筛选面板、页面返回和网络恢复行为。

审阅边界与参考

结论来自 2026-10-15 的前端默认分支静态源码；没有调用服务，也没有检查对应后端控制器，所以无法判断服务端是否已支持这三项筛选字段。前端未把它们放进请求，且没有本地二次过滤，是可以直接从客户端代码确认的事实。本文没有运行构建、开发者工具或真机测试，不将潜在的旧响应覆盖写成已复现线上事故。

参考：Taro 应用配置、Taro 网络请求、React 管理状态、React Effect 同步与清理。