Expensify/App 公司信用卡银行图标显示异常问题分析

问题描述

在 Expensify 应用的工作区设置中，当用户尝试添加公司信用卡时，在信用卡订阅源列表页面出现了银行图标显示异常的情况。具体表现为：本应显示银行标志的位置却显示为空白图像。

技术背景

该问题出现在公司信用卡管理模块的订阅源选择页面。这个页面负责展示用户可选择的银行信用卡订阅源，每个订阅源应该显示对应的银行图标以便用户识别。

问题根源

经过开发团队分析，问题出在页面组件的渲染逻辑上。在 WorkspaceCompanyCardFeedSelectorPage 组件中，用于显示银行图标的 PlaidCardFeedIcon 组件的条件渲染逻辑存在缺陷。

原始代码错误地使用了 feed 变量作为条件判断，而实际上应该使用 plaidUrl 变量。这导致即使银行图标URL有效，组件也可能不会正确渲染。

解决方案

修复方案非常简单直接：将条件判断从 feed 改为 plaidUrl。这样就能确保只要有有效的银行图标URL，就会正确渲染对应的图标组件。

影响范围

该问题影响所有平台上的应用表现，包括：

• Android 应用和移动网页版
• iOS 应用和移动网页版
• Windows 和 macOS 的网页版
• macOS 桌面应用

修复过程

开发团队快速响应，在发现问题当天就提交了修复代码。修复经过测试验证后，被合并到主分支，并随版本 9.1.63-6 部署到生产环境。

经验总结

这个案例提醒我们：

1. 组件条件渲染逻辑需要仔细验证所有可能的分支
2. 即使是简单的变量替换也可能导致明显的UI问题
3. 全面的跨平台测试能帮助发现这类一致性问题

该问题的快速解决展现了 Expensify 开发团队对用户体验细节的关注和高效的问题响应能力。