Имеется такой React Component
import React, {useState, useEffect} from 'react';
//UI
import PokemonItem from './../PokemonItem';
function PokemonList() {
const [pokemons, setPokemons] = useState({
pokemonList: null,
loading: true,
});
useEffect(()=>{
fetch('https://pokeapi.co/api/v2/pokemon/')
.then(res => res.json())
.then(body => {
setPokemons({
pokemonList: body.results,
loading: false,
})
})
}, [])
console.log(pokemons);
return(
<div className="pokemon-list">
</div>
)
}
export default PokemonList;
После вызова хука useEffect()
, я смотрю в консоли, что у меня находится в pokemons
(В переменной, в которую должны были придти данные)
Но почему-то в консоли появляется 2 лога, один с начальными данными, а потом с уже пришедшими данными, почему так происходит?
Эта проблема в дальнейшем не позволяет мне работать с данными, видимо происходит какая-то ошибка, что я делаю не правильно?
Пытался добавить эту строку console.log(pokemons);
после setPokemons();
, в таком случаи в консоли появляется один лог с начальными данными, т.е. null в pokemonList
, данные еще не успевают придти.