React货币转换器切换按钮回调未执行问题求助

看起来你遇到的核心问题是**getRates函数没有处理你传入的回调参数**，导致你在swapValues里写的货币交换逻辑根本没机会执行。我来给你拆解问题并提供两种实用的解决思路：

问题根源 #

你的getRates函数定义只接收了currencyShortcut一个参数，但你调用的时候额外传了第二个回调函数：

this.getRates(currency2.shortcut, ()=>{
  this.setState({ currency1: currency2, currency2:currency1 })
});

因为getRates里完全没处理这个回调参数，所以这个函数直接被忽略了，自然不会触发后续的货币交换操作。

解决方案一：给getRates添加回调支持 #

修改getRates，让它在setState完成后执行传入的回调（注意setState本身是异步的，要放在它的第二个回调参数里执行，确保state已经更新）：

getRates(currencyShortcut, callback) {
  fetch(`https://api.fixer.io/latest?base=${currencyShortcut}`)
    .then(response => response.json())
    .then(parsedJson => {
      // 等state更新完成后再执行回调
      this.setState({ currencyRates: parsedJson }, () => {
        if (callback) callback();
      });
    })
    .catch(error => console.log('fetch error - ', error));
}

这样你的swapValues函数不需要修改，调用时传入的回调就会在汇率更新完成后触发，正确完成两种货币的交换。

解决方案二：用async/await简化异步流程 #

如果你觉得Promise链式调用不够直观，可以改用async/await来让异步逻辑更清晰：

首先把getRates改成异步函数：

async getRates(currencyShortcut) {
  try {
    const response = await fetch(`https://api.fixer.io/latest?base=${currencyShortcut}`);
    const parsedJson = await response.json();
    // 用Promise包裹setState，确保state更新完成后再继续
    await new Promise(resolve => {
      this.setState({ currencyRates: parsedJson }, resolve);
    });
  } catch (error) {
    console.log('fetch error - ', error);
  }
}

然后修改swapValues为异步函数，等待getRates执行完成后再交换货币：

async swapValues(e) {
  e.preventDefault();
  const { currency1, currency2 } = this.state;
  // 等待汇率更新完成
  await this.getRates(currency2.shortcut);
  // 再执行货币交换
  this.setState({ currency1: currency2, currency2: currency1 });
}

这两种方法都能解决你的问题，选择哪种取决于你更习惯的代码风格。

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