Блог

Главная - Вопросы по программированию - получение ошибки при использовании функции map с перехватами в Reactjs

получение ошибки при использовании функции map с перехватами в Reactjs

#javascript #arrays #reactjs #react-hooks

#javascript #массивы #reactjs #реагирующие перехваты

Вопрос:

Я пытаюсь создать простое приложение для отслеживания COVID, но после получения данных при использовании функции map я получаю следующую ошибку:

 Error : TypeError:countryData.map is not a function

введите описание изображения здесь

 import React, { useState, useEffect } from 'react';
import { NativeSelect, FormControl } from '@material-ui/core';

export const CountriesData = () => {
  const [countryData, setCountryData] = useState([]);
  const [isLoaded, setLoading] = useState(false);
  const url = 'https://covid19.mathdro.id/api/countries';

  useEffect(() => {
    async function DataOfCountry() {
      const data2 = await fetch(url);
      const MainData2 = await data2.json();
      console.log(MainData2);
      setCountryData(MainData2);
      setLoading(true);
    }
    DataOfCountry();
  }, [setCountryData]);

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return (
    <FormControl>
      <NativeSelect>
        <option value="global"> Global</option>

        {countryData.map((country, i) => (
          <option key={i} value={country}>
            {country}{' '}
          </option>
        ))}
      </NativeSelect>
    </FormControl>
  );
};

Комментарии:

1. Вы проверили значение MainData2 ? Вероятно, это не массив, а объект.

2. похоже, ваш базовый URL неверен, он должен быть ‘ covid19.mathdro.id/api » . Поскольку вы добавляете страны при вызове выборки.

3. Дорогой брат @Sam Url работает нормально. проблема с вызовом сопоставления

4. Дорогой брат @ZsoltMeszaros я внес небольшие изменения, и да, это не массив, а объект .. пожалуйста, помогите мне, как преобразовать объект в массив..

Ответ №1:

Это потому, что возвращаемые данные являются объектом, а не массивом. Вам не нужно его преобразовывать; свойство выбранных данных countries представляет собой массив стран, поэтому вам нужно обновить свое состояние с помощью этого:

 import React, { useState, useEffect } from 'react';
import { NativeSelect, FormControl } from '@material-ui/core';

export const CountriesData = () => {
  const [countries, setCountries] = useState([]);
  const [isLoaded, setLoading] = useState(false);
  const url = 'https://covid19.mathdro.id/api/countries';

  useEffect(() => {
    async function fetchCountries() {
      const response = await fetch(url);
      const data = await response.json();

      // you should handle errors!

      setCountries(data.countries);
      setLoading(true);
    }
    fetchCountries();
  }, [setCountries]);

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return (
    <FormControl>
      <NativeSelect>
        <option value="global">Global</option>
        {countries.map((country) => (
          <option key={country.iso3} value={country.name}>
            {country.name}
          </option>
        ))}
      </NativeSelect>
    </FormControl>
  );
};
Метки: