将 js 应用程序货币转换器转换为 React

Question

我正在尝试将我的货币应用程序转换为 React 并碰壁。不知道如何将 axios 安装到 React 中，不知道是否可以显示我的所有代码，但我会尝试。我尝试使用类组件和 this.state，但它可能是死胡同。

我的js代码：

const input = document.querySelector("#input");
const selector = document.querySelector("#currencies");
const button = document.querySelector("#button");
const endresult = document.querySelector('#endresult');

const one = "http://api.nbp.pl/api/exchangerates/rates/A/CHF/";
const two = "http://api.nbp.pl/api/exchangerates/rates/A/EUR/";
const three = "http://api.nbp.pl/api/exchangerates/rates/A/USD/";

const requestOne = axios.get(one);
const requestTwo = axios.get(two);
const requestThree = axios.get(three);

axios
  .all([requestOne, requestTwo, requestThree]).then(axios.spread((...responses) => {
  for (var i of responses){
    let newArr = responses.map((i) => ({code:i.data.code, value: i.data.rates[0].mid}))
    button.addEventListener('click', (e) => calculate(newArr));
  }
  }))
  .catch(errors => {
    console.log(errors);
  });

function calculate(currArr) {
  if (input.value == "") {
    alert("Wpisz kwotę")
  } else {
    let res = currArr.filter(i => i.code == selector.value)[0].value;
    let result = input.value * res;
    result = result.toFixed(2);
    endresult.textContent = result + "zł"
  }    
}

还有我的反应代码，现在我尝试使用静态货币汇率创建它（请不要对我大喊大叫）：

import React from 'react';

class App extends React.Component {
  constructor(props) {
    super();

    this.state = {
        chosenCurrency: null,
        endResult: null,
      currencies: {
          eur: {
              id: 1,
              code: "EUR",
              rate: 4.34,
          },
          chf: {
              id: 2,
              code: "CHF",
              rate: 3.23,
          },
          usd: {
              id: 3,
              code: "USD",
              rate: 4.12,
          }
      }
    }
  }
  
  
  
  
  
  setChosenCurrency = (e) => {
    let idx = e.target.selectedIndex;
    let currency = e.target.options[idx].value;
    this.setState((state, props) => ({chosenCurrency: currency}))
}

 calculate = () => {
    //if (input.value === "") {
       // alert("Wpisz kwotę")
      //} else {
        let res = this.state.currencies[this.state.chosenCurrency].rate;
        let result = 1 * res;
        result = result.toFixed(2);
        this.setState((state, props) => {
         return {endResult: result}
        })
     // }    
  }

  render() {
    return (
    <div class="container-przel">
        <input id="input" placeholder="0" value={1} onChange={e => this.setChosenAmount(e)} />
        <select id="currencies" onChange={e =>  this.setChosenCurrency(e)}>
            <option value={this.state.currencies.eur.rate}>{this.state.currencies.eur.code}</option>
            <option value={this.state.currencies.chf.rate}>{this.state.currencies.chf.code}</option>
            <option value={this.state.currencies.usd.rate}>{this.state.currencies.usd.code}</option>
        </select>
            <p>{this.state.chosenCurrency}</p>
        
        <button id="button" type="button" onClick={e => this.calculate()}>Przelicz!</button>
        <p id="endresult">{this.state.endResult} zł</p>
      
    </div>
    );
  }
}

export default App;

我会感谢任何帮助。