React中async/await结合find、map的函数异常排查

核心问题 #

你的getBaseCurrencies函数存在两个关键错误，导致后续调用返回空数组：

1. find回调使用async导致返回Promise：Array.find()的回调如果是async函数，会返回一个Promise而非匹配到的实际对象。这意味着filteredQuoteAssetObj其实是个Promise，而非你期望的swapInfo中的项，后续访问filteredQuoteAssetObj.baseAssets会得到undefined，调用map自然返回空数组。首次渲染可能因swapInfo初始值或巧合暂时"正常"，但后续状态更新后逻辑就会失效。
2. map中多余的async/await：item.baseAsset看起来是同步值，不需要用async/await包裹，这会把原本的字符串数组变成Promise数组，不是你需要的结果。

修复后的代码 #

const getBaseCurrencies = (fromCurrency) => {
  // 去掉async，同步匹配目标项
  const filteredQuoteAssetObj = swapInfo.find(item => item.quoteAsset === fromCurrency);
  // 处理匹配不到的情况避免报错，同时去掉多余的async/await
  return filteredQuoteAssetObj?.baseAssets.map(item => item.baseAsset) || [];
};

额外注意事项 #

• 确保swapInfo是最新状态：如果getBaseCurrencies在swapInfo更新后调用，React状态更新是异步的，要保证调用时swapInfo已包含最新数据。如果是在事件处理或其他钩子中调用，确认swapInfo已经更新完成。
• 边界情况处理：添加?.可选链和|| []兜底，避免当fromCurrency在swapInfo中找不到匹配项时抛出错误，直接返回空数组更安全。

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