如何使用来自 API 的数据填充选择下拉元素 - ReactJS

Posted 2023-02-27

【中文标题】如何使用来自 API 的数据填充选择下拉元素 - ReactJS

【英文标题】：How to populate select dropdown elements with data from API - ReactJS

【发布时间】：2019-10-05 17:26:02

【问题描述】：

我对 React 还很陌生。我正在从 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 的货币代码（例如 GBP、EUR、USD）和值以显示汇率而不是 NaN。

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

【参考方案1】：

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

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

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

【讨论】：

我明白了，愚蠢的错误，但下次知道就好了。在获取数据的地方有什么我可以做得更好的地方吗？

您可以将 fetch 调用分离到另一个文件中的函数中，以便可以重复使用。另外，也许您可​​以查看反应钩子而不是使用类组件。见：robinwieruch.de/react-hooks-fetch-data