如何使用API-ReactJS中的数据填充选择下拉列表元素

问题描述

我还是个新手。我正在从API获取数据，当我检查控制台日志时可以看到数据。但是，我不知道如何使用map()创建一个新数组，然后选项元素可以使用该数组来显示货币代码。

当前它填充下拉列表，但选项元素都为空，并且结果显示为NaN。

下面是我获取数据的代码示例。

state = {
    currencies: [],
    base: "USD", //default value
    amount: "",
    convertTo: "EUR",
    result: ""
  };

componentDidMount() {
    fetch("https://api.exchangeratesapi.io/latest")
      .then(response => {
        return response.json();
      })
      .then(data => {
        let currenciesFromApi = Object.keys(data.rates);
        console.log(currenciesFromApi);
        this.setState({
          currencies: currenciesFromApi
        });
      })
      .catch(error => {
        console.log(error);
      });
  }

预期结果：下拉列表将填充来自API的货币代码(如英镑、欧元、美元)，值将显示汇率，而不是NaN。

实际结果：下拉列表为空，选择其中任何一个也会返回NAN。

推荐答案

我检查了源代码，发现货币数组似乎只包含字符串值。因此，当您通过它们映射以呈现选项时，只需将变量直接用作字符串。

{this.state.currencies.map(currency => (
  <option key={currency} value={currency}>
    {currency}
  </option>
))}

参见：https://codesandbox.io/s/hu8cb