React加密货币应用状态更新后函数无法返回更新数据问题

核心问题点 #

1. getBaseCurrencies未响应状态变化：当前是普通函数，不会在selectedCurrencyState或swapInfo更新时自动重新计算，可能拿到旧状态值导致返回空数组。
2. 状态更新的异步竞态：直接依赖当前selectedCurrencyState对象更新状态，在异步场景下可能获取到旧状态值，引发错误的状态变更。

具体修复步骤 #

1. 用useMemo缓存计算结果，确保状态变化时重新计算

将货币数组的计算改为记忆化逻辑，每当依赖的状态变化时自动重新生成结果：

import { useMemo } from 'react';

const baseCurrencies = useMemo(() => {
  if (!selectedCurrencyState.selectedFromCurrency) return [];
  const filteredQuoteAssetObj = swapInfo.find(item => 
    item.quoteAsset === selectedCurrencyState.selectedFromCurrency
  );
  return filteredQuoteAssetObj ? filteredQuoteAssetObj.baseAssets.map(item => item.baseAsset) : [];
}, [selectedCurrencyState.selectedFromCurrency, swapInfo]);

之后直接使用baseCurrencies变量即可，无需再调用getBaseCurrencies函数。

2. 使用函数式更新避免状态竞态

所有更新selectedCurrencyState的逻辑，改用函数式更新确保获取最新状态：

• 修改handleInvertSelectedAssets：

const handleInvertSelectedAssets = (fromCurrency, toCurrency) => {
  setSelectedCurrencyState(prevState => ({ 
    ...prevState, 
    selectedFromCurrency: toCurrency, 
    selectedToCurrency: fromCurrency 
  }));
  localStorage.setItem('toCurrency', fromCurrency);
  localStorage.setItem('fromCurrency', toCurrency);
};

• 修改useEffect中的初始化更新：

if (transactionType === 'BUY') {
  setSelectedCurrencyState(prevState => ({ 
    ...prevState, 
    selectedFromCurrency: localStorage.getItem('fromCurrency') || 'USD', 
    selectedToCurrency: symbol || localStorage.getItem('toCurrency') 
  }));
}

3. 校验切换后的货币是否存在于数据源中

若修复后仍返回空数组，需确认swapInfo中是否包含quoteAsset为SHIB的项，可添加调试代码验证：

console.log('当前选中的基准货币:', selectedCurrencyState.selectedFromCurrency);
console.log('匹配的数据源项:', swapInfo.find(item => item.quoteAsset === selectedCurrencyState.selectedFromCurrency));

如果没有匹配项，说明数据源本身不支持SHIB作为基准货币，需要补充数据或调整业务逻辑。

4. 调整交易类型切换的状态更新顺序

由于状态更新是异步的，避免依赖旧状态值完成资产反转，直接在状态更新逻辑中处理：

const handleTransactionTypeChange = (type) => {
  if (transactionType !== type) {
    localStorage.setItem('transactionType', type);
    setAmountState({ toCurrencyAmount: '', fromCurrencyAmount: '' });
    setTransactionType(type);
    // 直接基于最新状态反转资产
    setSelectedCurrencyState(prev => ({
      ...prev,
      selectedFromCurrency: prev.selectedToCurrency,
      selectedToCurrency: prev.selectedFromCurrency
    }));
    localStorage.setItem('toCurrency', selectedCurrencyState.selectedFromCurrency);
    localStorage.setItem('fromCurrency', selectedCurrencyState.selectedToCurrency);
  }
};

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