Блог

Я новичок в React JS и пытаюсь получить данные внутри useEffect, и у меня есть отдельная функция для моего api, но когда я проверяю данные.далее в консоли.журнал при первой загрузке данных нет, но после добавления нескольких изменений он работает нормально, но при обновлении страницы по-прежнему появляется ошибка. Кроме того, я заметил, когда попытался утешить.войдите в функцию, в которой объявлен Axios или api, при первой загрузке приложения уже есть данные. Кто-нибудь сталкивался с этой проблемой? Или мой подход неверен?

Вот мои коды /src/App.js

 useEffect(async () => {
    const res = await service.apiPokemon.fetchAll();
    console.log(res.data.next)
}, []);
 

/src/api/pokemon.js

 import axios from 'axios';
const URL = 'https://pokeapi.co/api/v2/pokemon';

export const fetchAll = async () => {
    try {
        const res = await axios.get(URL);
        console.log(res.data.next);
        
        return res;
    } catch (error) {
        console.log(error);
    };
};
 

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

   let [pokemonsList, setPokemonsList] = useState([])

  // Your useEffect hook to fetch data on mount

  return (
    { pokemonsList.lenght > 0 amp;amp; // If you are sure you'll receive pokemons
      <div> {pokemonList.map((pokemon) => (
         <p> {pokemon.name} </p>
      )} </div>
    }
  )

 

Теперь вы увидите имена покемонов только тогда, когда у вас будет список.
Вы также можете добавить сообщение о загрузке в случае, если для ответа потребуется время с помощью редактирования и селекторов.