勾掉一笔交易的审批框，切换员工筛选，再回到全部交易，刚才的修改又恢复了。这是 Ramp 前端挑战里很有代表性的一项缺陷：页面能响应点击，数据却没有在不同视图之间保持一致。
这套 2023 New Grad Frontend 挑战是一份 React 项目，共七项待修复行为。挑战仓库的任务说明给出了复现步骤和验收结果，适合练习读代码、定位状态归属和串联回归。它属于历史 take-home 版本；收到新的 Ramp OA 邀请时，先确认邀请邮件中的任务形式与提交要求。
第一题：交易列表的七项缺陷修复
题目描述
项目展示交易列表，支持按员工筛选、加载后续交易和修改审批状态。需要修复的行为包括下拉层滚动错位、审批框点击无效、切回全部员工崩溃、分页覆盖旧数据、加载状态串扰、末页按钮不消失，以及筛选切换后审批结果丢失。这是一项完整的工程修复任务，七项缺陷共用同一份项目状态。
验收应沿着用户操作进行：先加载全部交易，修改一条记录，进入员工视图，再回到全部交易并继续加载下一页。单独看一个组件的截图，无法覆盖这些问题。
解题思路
先画清数据经过哪些位置：请求函数返回交易，hook 保存结果，列表选择当前数据源，行组件接收审批值。每经过一层，都检查有没有复制出另一份状态。下面的例子和修复顺序用于练习，不是候选人的提交代码。
下拉层要和触发器使用同一套坐标
如果菜单使用 fixed 定位，定位值就应来自视口坐标；如果菜单放在有定位的父容器内，则使用相对父容器的坐标。页面滚动后继续复用旧的视口坐标，会让菜单停在原处。先检查菜单是否通过 portal 挂到页面根部，再决定跟随滚动重新测量，还是让菜单回到触发器的定位容器。不要用随意增加偏移量的方式补一个特定屏幕尺寸。
审批框点击和审批数据更新要分开验证
点击无效先沿事件链查：label 是否关联了正确的 input，input 是否被禁用，onChange 是否把新的布尔值传给上层。受控 input 的 checked 来自 props，只有事件触发而没有更新数据，下一次渲染仍会显示旧值。
用交易 ID 标识修改对象。例如 T17 从 true 改为 false，更新目标应是 T17 的记录，不能是“当前列表第一行”。同一笔交易在员工视图与全部视图中的位置并不相同。
全部员工是一个明确的查询分支
选择 All Employees 时，不要把空员工 ID 交给按员工查询的接口。切换到全部交易的数据分支，清理上一轮筛选状态，再加载第一页。清理的对象是列表视图和分页位置，不应顺手删除已经成功保存的审批结果。
加载更多追加，切换筛选替换
同一个查询的下一页应追加到旧列表；一个新筛选的第一页则应替换旧列表。把这两种操作都写成 setData(newPage)，就会丢掉前面的记录。练习时可用三页数据验证：第一页 T1、T2，第二页 T3，第三页为空，最终仍应保留 T1、T2、T3。
追加时还要考虑重复返回的交易 ID。按 ID 合并可以消除重复行，但不能只去重后忽略服务端对原记录的更新。若加入快速切换筛选的扩展测试，为每次查询保存请求序号，只接收仍属于当前查询的响应。
员工加载和交易加载各有状态
员工列表已经加载完成时，继续请求交易不应再次把员工下拉框变成 Loading。分别维护 employeesLoading 和 transactionsLoading，按钮读取自己依赖的状态。一个全局 isLoading 无法准确表达两个请求的生命周期。
分页按钮同时检查查询模式和末页标记
员工筛选结果没有分页，就隐藏 View More。全部交易只有在下一页存在时才显示按钮。末页标记用接口约定判断，避免把合法的页码 0 和没有下一页混为一谈。请求发出期间也要拦住重复点击，否则会同时追加两份同页数据。
让审批结果跨视图保留
若员工查询和全部交易分别缓存了同一笔交易，只修改其中一份缓存，就会在切换时读到旧值。可以维护按交易 ID 组织的统一实体表，让两个列表只保存 ID；也可以在审批更新成功后同步修正所有相关缓存。项目较小时，选一种可验证的方式即可。
用一条连续测试检查修复：T17 初始已批准，取消批准，切换到另一员工，切回全部员工，再打开 T17 所属员工。每一步都应看到未批准。加入失败回滚练习时，再模拟保存失败，确认界面能恢复旧值并允许重新操作。
Ramp OA 做完后怎样检查
先跑任务给定的七组复现步骤，再跑跨筛选、跨分页的连续操作。保留项目原有的测试标识；提交前从一个新会话打开作业链接，确认页面能运行，链接权限也符合当前邀请要求。不要把历史仓库中的旧版上传命令当成今天平台的固定操作。
可以把一次练习分成读代码、修复、连续回归三段。花在最后一段的时间应有明确产物，例如“同一笔交易在两个视图里仍保持修改后的值”，而不只是再点一遍页面。
FAQ
审批框能点了，为什么还会回到旧值？
点击链路修好只说明事件能传递。还要检查修改有没有写入列表实际读取的数据源，以及其他查询缓存是否仍保留旧记录。
View More 应该一直追加数据吗？
只有当前查询加载下一页时追加。员工筛选发生变化或重新加载第一页时，应重建当前列表，否则会把不同查询的结果混在一起。
需要为了这道题引入全局状态库吗？
先使用项目现有的数据层解决问题。这个历史挑战限制新增外部依赖；状态归属清楚、更新路径一致，比为了七项修复迁移整个应用更有帮助。
参考来源
关于 CSINTERVIEWHELP
准备 Ramp OA 时，可以找 CSINTERVIEWHELP 做题型讲解、限时模拟和代码复盘。无论是 OA 题型解析、OA 辅导、VO 模拟面试、VO 面试陪练还是系统设计训练，都可以按当前薄弱环节安排练习：CSINTERVIEWHELP · 服务详情
