Почему данные приходят не так, как ожидается?

Question

Имеется такой 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, данные еще не успевают придти.

Answer 1

как правильно сказал Сергей

useEffect(() => {}, [])

срабатывает после первого рендера компоненты. Это эквивалентно componentDidMount в классовых компонентах.

соответственно вы видете 2 разных состояния - начальное и когда пришел ответ от сервера и поменялся state компоненты

предположу что ваша проблема связана с тем что вы делаете map для pokemons.pokemonList и ваше начальное значение это null.

самый простой способ решения этой проблемы инициализировать начальное состояние как

const [pokemons, setPokemons] = useState({
    pokemonList: [],
    loading: true,
});

БЛОГ НА HUSL

Почему данные приходят не так, как ожидается?

Ответы (1 шт):