Expensify/App 离线删除费用项导致的无限加载问题分析与解决方案

问题背景

在Expensify/App项目中，用户在使用离线功能时发现了一个关于费用项删除的异常行为。当用户在离线状态下删除费用项后，仍然可以点击已删除的费用项预览，导致应用进入无限加载状态。这个问题影响了多个平台，包括Android、iOS和Web端。

问题现象

具体表现为：

1. 用户在离线状态下通过"更多"菜单删除费用项
2. 删除操作完成后，费用项预览没有按预期变为灰色不可点击状态
3. 用户仍可点击已删除的费用项，导致界面进入无限加载
4. 当网络恢复后，界面会显示"内容不存在"页面

技术分析

经过深入排查，发现问题根源在于两种删除操作调用了不同的API方法：

1. 通过预览上下文菜单删除时调用的是IOU.deleteTrackExpense方法
2. 通过"更多"下拉菜单删除时调用的是IOU.deleteMoneyRequest方法

这两种方法在处理离线删除时的乐观更新逻辑不一致，导致UI状态更新出现差异。deleteMoneyRequest方法没有正确设置乐观删除数据，使得前端无法感知到费用项已被删除。

解决方案

开发团队提出了两种解决方案：

1. 临时方案：回滚相关修改，移除"更多"菜单中的删除选项
2. 永久方案：统一两种删除操作的调用方式，确保都使用deleteTrackExpense方法

最终选择了第二种方案，因为它不仅修复了问题，还保持了功能完整性。修改后的代码确保：

• 所有删除操作都通过同一API方法执行
• 乐观更新逻辑一致
• UI状态能够正确反映删除操作

经验总结

这个案例给我们几个重要启示：

1. 对于同一功能的不同入口，应保持后端调用的一致性
2. 离线操作需要特别注意乐观更新的处理
3. 新增功能时需要考虑所有可能的使用场景，特别是边缘情况
4. 完善的测试用例对于发现这类问题至关重要

后续改进

为了防止类似问题再次发生，团队计划：

1. 增加针对离线删除操作的回归测试用例
2. 审查其他可能存在的多入口不一致问题
3. 优化乐观更新机制的统一性
4. 加强代码审查中对边缘情况的关注

这个问题的解决过程展示了Expensify团队对产品质量的重视和对用户体验的关注，也体现了开源社区协作解决问题的效率。