Как заполнить выбранные выпадающие элементы данными из API - ReactJS

Question

Я довольно новичок в 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.

Answer 1

Я проверил исходный код, и кажется, что массив валют содержит только строковые значения. Поэтому, когда вы отображаете их для отображения параметров, просто используйте переменную непосредственно как строку.

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

См .: https://codesandbox.io/s/hu8cb