React简易货币转换器切换币种时汇率不更新求助

问题分析 #

1. 汇率更新失败（JSON解析错误） #

第二个useEffect中使用了错误的模板字符串语法：$(BASE_URL)，正确写法应为${BASE_URL}。错误语法导致请求URL无效，服务器返回HTML页面而非JSON数据，触发SyntaxError，无法获取新汇率。

2. NaN 值警告 #

exchangeRate初始状态为undefined，计算toAmount/fromAmount时，amount * undefined或amount / undefined会得到NaN，传给<input type="number">的value属性时触发警告。

3. 基准货币缺失下拉选项 #

data.base（默认值为EUR）不在data.rates的键列表中，导致fromCurrency对应的选项不存在，下拉菜单会出现匹配异常。

修复步骤 #

1. 修正API请求URL的模板语法 #

修改App.js中第二个useEffect的fetch语句：

// 错误写法
fetch(`$(BASE_URL)?base=${fromCurrency}&symbols=${toCurrency}`)

// 正确写法
fetch(`${BASE_URL}?base=${fromCurrency}&symbols=${toCurrency}`)

2. 处理exchangeRate未初始化时的计算逻辑 #

在App.js中给金额计算添加判断，避免出现NaN：

let toAmount;
let fromAmount;

// 仅当exchangeRate存在时才执行转换计算
if (exchangeRate) {
  if (amountInFromCurrency) {
    fromAmount = amount;
    toAmount = amount * exchangeRate;
  } else {
    toAmount = amount;
    fromAmount = amount / exchangeRate;
  }
} else {
  // 初始加载时的默认值，避免NaN
  fromAmount = amount;
  toAmount = 0;
}

3. 确保基准货币在下拉选项中 #

修改第一个useEffect的setCurrencyOptions逻辑，将基准货币加入选项列表：

useEffect(() => {
  fetch(BASE_URL)
    .then((res) => res.json())
    .then((data) => {
      const firstCurrency = Object.keys(data.rates)[0];
      // 把基准货币加入选项列表
      setCurrencyOptions([data.base, ...Object.keys(data.rates)]);
      setFromCurrency(data.base);
      setToCurrency(firstCurrency);
      setExchangeRate(data.rates[firstCurrency]);
    });
}, []);

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