Question

我正在尝试组合货币转换器，但只想显示以下转换：

来自：美元

至：GBP（英镑）、EUR（欧元）、ZAR（南非兰特）

我曾尝试实现这一点，但不幸的是没有成功。我正在从 API 获取数据，但显示的是所有货币，而不仅仅是指定的货币。我不太确定我哪里出错了。

请看下面我的代码：

CurrencyConverter.js：

// Imported react libraries and ConverterHeader component.
import React, { Component } from "react";
import ConverterHeader from './ConverterHeader';

// Imported Axios to assist retrieving external data from API.
import axios from "axios";

class CurrencyConverter extends Component {
    constructor(props) {
        super(props);
        this.state = {
            result: null,
            fromCurrency: ['USD'],
            toCurrency: ['ZAR', 'GBP', 'EUR'],
            amount: 1,
            currencies: []
        };
    }

    componentDidMount() {
        axios
            .get("http://api.exchangeratesapi.io/v1/latest?access_key=dda44a510d8b21442bca6f4d7800b655&format=1")
            .then(response => {
                const currencyAr = [''];
                for (const key in response.data.rates) {
                    currencyAr.push(key);
                }
                this.setState({ currencies: currencyAr });
            })
            .catch(err => {
                console.log("Error", err);
            });
    }

    convertHandler = () => {
        if (this.state.fromCurrency !== this.state.toCurrency) {
            axios
                .get(
                    `http://api.exchangeratesapi.io/v1/latest?access_key=dda44a510d8b21442bca6f4d7800b655&format=1?base=${this.state.fromCurrency
                    }&symbols=${this.state.toCurrency}`
                )
                .then(response => {
                    const result =
                        this.state.amount * response.data.rates[this.state.toCurrency];
                    this.setState({ result: result.toFixed(2) });
                })
                .catch(error => {
                    console.log("Error", error.message);
                });
        }
    };

    selectHandler = event => {
        if (event.target.name === "from") {
            this.setState({ fromCurrency: event.target.value });
        } else {
            if (event.target.name === "to") {
                this.setState({ toCurrency: event.target.value });
            }
        }
    };

    render() {
        return (
            <div className="Converter">
                <ConverterHeader />
                <h2>Currency Converter</h2>
                <p>Want to convert the value of your cash playing bundle or your winnings? No problem. Use the below currency converter for an
                    up to date conversion.</p>
                <p>Enter the value in Dollars and select the currency that you would like the amount converted to. Click on "Convert" and the
                    total should display at the bottom.
                </p>
                <div className="Form">
                    <label>Amount:</label>
                    <input
                        id="currencyinput"
                        name="amount"
                        type="text"
                        defaultValue={this.state.amount}
                        onChange={event => this.setState({ amount: event.target.value })}
                    />
                    <label>From USD:</label>
                    <select
                        name="from"
                        onChange={event => this.selectHandler(event)}
                        defaultValue={this.state.fromCurrency}
                    >
                        {this.state.currencies.map(cur => (
                            <option key={cur}>{cur}</option>
                        ))}
                    </select>
                    <label>To currency:</label>
                    <select
                        name="to"
                        onChange={event => this.selectHandler(event)}
                        defaultValue={this.state.toCurrency}
                    >
                        {this.state.currencies.map(cur => (
                            <option key={cur}>{cur}</option>
                        ))}
                    </select>
                    <button id="currencybutton" onClick={this.convertHandler}>Convert</button>
                    {this.state.result && <h3 id="converteroutput">{this.state.result}</h3>}
                </div>
            </div>
        );
    }
}
// Exported "CurrencyConverter" to App.js.
export default CurrencyConverter;

App.js

// Imported react libraries and components.
import React from 'react';
// Imported css styles.
import './App.css';
// Imported components.
import DropdownMenu from './components/DropdownMenu';
import CurrencyConverter from './components/CurrencyConverter';
import Landing from './components/Landing';
import WinBoard from './components/WinBoard';
import { BrowserRouter, Route, Switch } from 'react-router-dom';

// Rendering and returning data to be exported to Index.js.
function App() {
  // const WinCards = buildWinCards()
  return (
    <div>
      <BrowserRouter>
        <div className="App">
          <DropdownMenu />
          <Switch>
            <Route exact={true} path="/" render={() => (
              <Landing />
            )} />
            <Route path="/CurrencyConverter" render={() => (
              <CurrencyConverter onChange={(e) => this.setState({ fromCurrency: e.target.value })} />
            )} />
            <Route path="/Win" render={() => (
              <WinBoard />
            )} />
          </Switch>
        </div>
      </BrowserRouter>
    </div>
  );
}
// Exporting to render App component in Index.js where the ReactDom.Render() method is called.
export default App;

如果您愿意提供任何帮助，我将不胜感激。

Answer 1

多亏了 Ragul Cs 的帮助，我才能够解决这些问题。感谢您指引我走向正确的方向。

我对 CurrencyConverter.js 组件进行了以下更改：

componentDidMount() 部分：

componentDidMount() {
    axios
        .get("http://data.fixer.io/api/latest?access_key=34133d0b08e1117ce1234330c92156ff&format=1")
        .then(response => {
            const currencyAr = ['-- Select Currency --'];
            for (const key in response.data.rates) {
                if (['ZAR', 'GBP', 'EUR'].includes(key)) { currencyAr.push(key); }
            }
            this.setState({ currencies: currencyAr });
        })
        .catch(err => {
            console.log("Error", err);
        });
}

render() 部分：

<label>From USD:</label>
  <select
    name="from"
    onChange={event => this.selectHandler(event)}
    value={this.state.fromCurrency}
  >
    <option>USD</option>
  </select>

我希望这能在未来对其他人有所帮助。

ReactJS 货币转换器 :: 如何仅显示选定的货币

1 个答案: