题目重点：在接口文档不完整的情况下先以最小请求验证数据形状，再构建可测试的 React 界面与明确的缓存失效边界。
题意与假设
这道练习题保留了面经中值得训练的核心约束，并将需要澄清的条件单独列出。现场拿到变体时，先和面试官确认这些条件。
- 训练版是读取一个资源列表并支持筛选/详情的界面，用以展示工程拆解；实际页面功能须以现场可见要求替换。
- 给定 URL 可能返回 JSON、错误或分页结果；在可用 sandbox 内先用一个只读请求观察 schema，绝不把未知接口当生产服务随意写入。
- 缓存只作用于可安全重用的读请求；鉴权主体、筛选条件、分页与 API 版本进入 cache key，写操作后的失效需按资源范围处理。
解题路线
- 先与面试官核对可交付的最小垂直切片和允许探索范围：页面输入、关键输出、成功标准及时间。用浏览器网络工具/示例响应确认状态码、Content-Type、数据结构与错误体。
- 将 API adapter 与组件分离：adapter 校验 schema 并把不稳定字段映射成稳定 ViewModel；组件显式区分 idle/loading/success/empty/error，不让失败时渲染出上一轮成功数据。
- 先完成可用交互与无障碍基础：label、键盘焦点、加载/错误提示、按钮禁用与布局响应式；再做视觉优化，不让 UI 细节遮蔽数据正确性。
- 缓存按完整参数键、TTL/ETag 或库的 staleTime 设计；后台重新验证与手动刷新要能解释。对含个人数据的响应做用户隔离，登出清理缓存。
- AI 辅助轮让工具处理小的有界任务：生成 adapter 测试、组件骨架或样式，再人工阅读 diff、运行交互用例和检查无法从 API 文档确认的假设。
手动走一遍
虚构训练例输入 query='a' 后马上改为 'ab'，两次 GET 有不同 cache key。'ab' 的结果先回，界面显示 'ab'；'a' 的旧结果晚回时不能覆盖当前输入。空结果显示独立 empty state，401 显示权限提示且不缓存为成功。具体资源类型不是原题事实。
规模与取舍
列表 R 条记录做一次映射 O(R)，本地过滤 O(R) 每次输入；网络延迟、分页和缓存命中率决定响应时间。缓存内存≈活跃 query 数×每页 payload 大小，要设容量和失效。
易错点与追问
容易失分的边界
- 没有 API 文档就猜字段，组件里散落 `data?.items?.x`，错误难定位。
- 只处理 happy path，加载/空/错误状态不可区分。
- 缓存键只用 URL，忽略用户身份或查询参数，导致错数据甚至越权展示。
- 改了 UI 未测试真实请求与键盘交互。
- 把训练资源列表描述成面试原题界面。
继续深挖
- 无文档 API 偶尔返回字段类型变化，adapter 如何报告且不崩页面？
- 乐观更新失败时怎样回滚缓存和界面？
- 如何给面试官证明 AI 生成代码经过自己理解与验证？
