Question

我正在使用react.js进行货币计算器

通过getRates函数获取当前状态：

 getRates(currencyShortcut){
     fetch('https://api.fixer.io/latest?base='+currencyShortcut)
       .then(response => response.json())
       .then(parsedJson => this.setState({currencyRates:parsedJson}))
       .catch(error => console.log('fetch error - ', error))   
 }

我使用它们计算给定输入值的数量，屏幕上显示的是：

calculateCurrenciesValues(curr,userInput){
  let currency1val,currency2val;
  const rate = this.state.currencyRates.rates[this.state.currency2.shortcut];
  if(curr === 1){
    currency1val = userInput;
    currency2val = Math.round(rate*userInput*100)/100;
  }else{
    currency1val = Math.round(userInput/rate*100)/100;
    currency2val = userInput;
  }
  this.setState({
    currenciesValues:[currency1val,currency2val]
  })
}

第一个HTTP请求是使用componentWillMount

完成的

componentWillMount(){
    this.getRates('USD');
}

但你也可以从列表中选择另一种货币而不是州需要获得新的利率，所以这里是货币兑换的处理程序：

  changeCurrency(currFlag,currShortcut,currSymbol){
    const selectedCurrency = {
      path:currFlag,
      shortcut:currShortcut,
      symbol:currSymbol
    };
    const {listOfCurrencies,currency1,currency2,currenciesValues,currencyRates} = this.state; 

    if(this.state.listOfCurrencies.displayFor === 1 ){
      this.getRates(currShortcut);
      this.setState({
        currency1:selectedCurrency
      })
      this.calculateCurrenciesValues(1,currenciesValues[0])
    }
    else{
      this.setState({
        currency2:selectedCurrency
      });
      this.calculateCurrenciesValues(2,currenciesValues[1])
    }

    this.setState({
      listOfCurrencies:{
        display:!listOfCurrencies.display
      }
    })
  }

正如你所看到的，我想要做的是在货币改变后重新计算，虽然 this.getRates（currShortcut）加载州的新费率，但计算 this.calculateCurrenciesValues（1 ，currencyValues [0]）是按照我所期望的旧费率而不是新费率完成的。

在实践中，它看起来如下例如我选择了USD =＆gt;英镑为默认值，我在第一个输入中输入10并显示“10 $ = 7.06£”，所以我想要其他的美元，所以我改为EUR，我得到EUR =＆gt;英镑比我在州获得新的利率，但计算是用旧利率计算的，所以只有货币符号显示值“10€= 7.06£”的变化，如果我要第二次换货币，现在让它为JPY，有州的新税率，但再次使用旧税率计算，这对欧元“10¥= 8.79£”是正确的

有人知道如何使用新获得的数据进行计算？

Answer 1

尝试仅在状态中存储费率和当前用户选择。

在渲染方法中执行计算，这样只要状态发生变化，它就会重新运行。

Answer 2

如果您的calculateCurrenciesValues（）使用的值不正确，我首先会猜测您是以错误的顺序设置状态和调用函数。

我会按照以下方式处理......

用户在输入字段中输入值
OnChange事件发生在更新状态以反映状态当前输入值
用户更改货币
事件触发函数运行以根据计算新值当前状态（反映当前用户输入）

听起来你可能无法处理事件。查看您的代码以确保首次更新您的状态以反映当前用户输入并将计算基于当前状态。希望这有帮助，对不起，如果没有。

Answer 3

您必须在调用方法之前完成ajax请求。你可以试试这个

getRates(currencyShortcut, callback){
     fetch('https://api.fixer.io/latest?base='+currencyShortcut)
       .then(response => response.json())
       .then(parsedJson => this.setState({currencyRates:parsedJson}, function(){if(callback){callback();})
       .catch(error => console.log('fetch error - ', error))   
 }

 if(this.state.listOfCurrencies.displayFor === 1 ){
  this.getRates(currShortcut, function(){
      this.setState({
        currency1:selectedCurrency
      }, function(){
        this.calculateCurrenciesValues(1,currenciesValues[0])
      })
  });
}

了解如何使状态更改同步

3 个答案: