React货币转换器报错：Uncaught (in promise) TypeError问题求助

错误本质 #

这个报错的核心是：你尝试读取一个undefined值的AED属性——简单说就是某个本该存储汇率数据的对象，在切换货币时变成了空值，导致找不到对应的汇率字段。

具体排查方向 #

1. 汇率数据的加载与状态初始化 #

• 检查API请求逻辑：如果用useEffect发起汇率请求，初始状态别设为undefined，改成空对象{}。如果数据还没加载完成就去访问rates.AED，必然会报错。可以加个加载判断，比如数据未返回时显示“加载中”，避免直接渲染依赖汇率的内容。
• 验证API返回结构：确认接口返回的是包含rates字段的有效对象，排查是否存在请求失败的情况（比如网络问题、API密钥错误），失败时可能返回undefined或错误数据，进而引发后续读取属性的报错。

2. 组件Props传递问题 #

• 核对App.jsx向CurrencyRow传递的汇率props：确保完整传递了汇率对象，切换货币时有没有误将该props设为undefined。
• 在CurrencyRow中使用可选链兜底：把rates.AED改成rates?.AED，这样即使rates是undefined，也不会直接抛出错误，而是返回undefined，方便后续做容错处理。

3. 切换货币的状态更新逻辑 #

• 检查下拉切换的代码逻辑：确认每次切换货币都正确触发了汇率数据的更新，有没有在切换时误清空了汇率状态。
• 警惕竞态问题：如果快速切换货币，前一次API请求还未完成就发起新请求，可能导致返回的汇率数据与当前选中货币不匹配，甚至某次请求失败返回空值，引发报错。可以在useEffect中添加清理函数，取消未完成的请求。

常见修复示例 #

// App.jsx中渲染前先判断数据是否存在
if (!rates) {
  return <div>加载中...</div>;
}

// 计算转换金额时使用可选链避免报错
const convertedValue = inputAmount * (rates?.[targetCurrency] / rates?.[baseCurrency]);

内容的提问来源于stack exchange，提问作者Manav Mehta