Expensify/App 中报告选择状态持久化问题的分析与解决

问题背景

在 Expensify/App 的 9.1.59-0 版本中，发现了一个关于费用报告选择状态持久化的技术问题。当用户在 MacOS 平台的 Chrome 或 Safari 浏览器上操作时，会出现以下情况：

1. 用户在工作区聊天中提交两个费用项目
2. 点击费用预览并全选所有项目
3. 返回工作区聊天后创建新报告并提交另外两个费用项目
4. 打开新报告时，之前报告的选择状态会意外地保留下来

技术分析

这个问题属于前端状态管理范畴，具体表现为组件间的状态未能正确重置。从技术实现角度看，可能有以下几个关键点：

1. 全局状态管理：选择状态可能被存储在全局状态中，而非与特定报告实例绑定
2. 组件生命周期：在切换报告时，相关组件可能没有正确执行清理操作
3. 状态初始化：新报告打开时，选择状态可能没有进行适当的初始化

解决方案

开发团队通过以下方式解决了这个问题：

1. 优化选择逻辑：集中处理费用选择逻辑，确保状态清晰
2. 添加清理机制：在打开新报告时，强制清除之前的选择状态
3. 组件隔离：确保每个报告实例拥有独立的选择状态管理

技术实现细节

修复的核心在于正确处理组件间的状态传递和清理。具体实现可能包括：

1. 在报告切换时触发状态重置回调
2. 使用 React 的 useEffect 钩子来管理组件卸载时的清理工作
3. 确保选择状态的存储与当前活动报告严格绑定

验证与回归测试

修复后，测试团队在多个平台上验证了解决方案的有效性：

1. 确认在 Windows 10/Chrome 环境下问题已解决
2. 验证了不同浏览器间的行为一致性
3. 确保修复不会影响其他相关功能

经验总结

这个案例提供了几个重要的前端开发经验：

1. 状态隔离：全局状态需要谨慎使用，特别是对于用户界面交互状态
2. 组件设计：组件应该设计为自包含的，尽量减少对外部状态的依赖
3. 测试覆盖：交互复杂的场景需要充分的测试覆盖，特别是状态转换边界情况

通过这次问题的解决，开发团队不仅修复了具体缺陷，还完善了相关组件的设计模式，为后续开发提供了更好的基础。