undefined after setState() (use hook) in Reactjs

Question

I learn react and js myself. please explain why this situation occurs. PS: excuse me for the large text, I tried to explain the problem as clearly as possible. thanks. Essence of the matter: set the initial state through the hook:

  const [pokemon, setPokemon] = useState({
    img: "",
    name: "",
    types: [],
    abilities: [],
    moveList: [],
    weight: "",
    height: "",
    description: "",
    genus: "",
    chanceToCatch: "",
    evolutionURL: ""
  });

further I make api requests to get information from inside useEffect:

useEffect(() => {
    const fetchData = async () => {
      await Axios({
        method: "GET",
        url: urlPokemonAPI
      })
        .then(result => {
          const pokemonResponse = result.data;

          /* Pokemon Information */
          const img = pokemonResponse.sprites.front_default;
          const name = pokemonResponse.name;
          const weight = Math.round(pokemonResponse.weight / 10);
          const height = pokemonResponse.height / 10;
          const types = pokemonResponse.types.map(type => type.type.name);
          const abilities = pokemonResponse.abilities.map(
            ability => ability.ability.name
          );
          const moveList = pokemonResponse.moves.map(move => move.move.name);
          setPokemon(() => {
            return {
              img: img,
              name: name,
              weight: weight,
              types: types,
              abilities: abilities,
              moveList: moveList,
              height: height
            };
          });
        })

      await Axios({
        method: "GET",
        url: urlPokemonSpecies
      }).then(result => {
         let description = "";
         result.data.flavor_text_entries.forEach(flavor => {
          if (flavor.language.name === "en") {
           description = flavor.flavor_text;
          }
        });
        let genus = "";
        result.data.genera.forEach(genera => {
         if (genera.language.name === "en") {
          genus = genera.genus;
         }
        });
        const evolutionURL = result.data.evolution_chain.url;
        const eggGroups = result.data.egg_groups.map(
          egg_group => egg_group.name
        );
        const chanceToCatch = Math.round(
          (result.data.capture_rate * 100) / 255
        );
        setPokemon(pokemon => {
          return {
            ...pokemon,
            description: description,
            genus: genus,
            chanceToCatch: chanceToCatch,
            evolutionURL: evolutionURL,
            eggGroups: eggGroups
          };
        });
      });
    };
    fetchData();
  }, [urlPokemonAPI, urlPokemonSpecies]);

The problem arises specifically with eggGroups (with identical handling of abilities and types there is no such problem). And this is what happens when I want to output data to a page as <div> Egg Group: {pokemon.eggGroups} </div> the data is displayed normally, but as soon as I want to output eggGroups as well as abilities and types separated by commas (join ( ',')) - error: TypeError: pokemon.eggGroups is undefined. I decided to check this matter through the console and stuffed this eggGroups key into the timeout:

At some point, eggGroups becomes undefined ... why, I can’t understand. But if I set the state separately, like const [egg, setEgg] = useState ([]); setEgg (eggGroups); such a problem is not observed. why is this happening? everything was fine with types and abilities. Thank you in advance.

Answer 1

Your code have a problem, this is the proper way to do await with axios, you need to import axios like this

import axios from 'axios';

the await should be call with a promise, then it return the data from api like this:

const result = await axios.get(urlPokemonAPI);

This is the code snippet with the same logic to your code

useEffect(() => {
    const fetchData = async () => {
        // import axios from 'axios';
        try {
            const result = await axios.get(urlPokemonAPI);
            const pokemon = result.data;
            setPokemon({
                img: pokemon.sprites.front_default,
                name: pokemon.name,
                weight: Math.round(pokemon.weight / 10),
                types: pokemon.types.map(i => i.type.name),
                abilities: pokemon.abilities.map(i => i.ability.name),
                moveList: pokemon.moves.map(i => i.move.name),
                height: pokemon.height / 10
            });

            const result2 = await axios.get(urlPokemonSpecies);
            const data = result2.data;
            let description = "";
            data.flavor_text_entries.forEach(i => {
                const lang = i.language.name
                if (lang === "en") {
                    description = i.flavor_text;
                }
            });
            let genus = "";
            data.genera.forEach(i => {
                const lang = i.language.name;
                if (lang === "en") {
                    genus = i.genus;
                }
            });
            setPokemon(pokemon => {
                return {
                    ...pokemon,
                    description,
                    genus,
                    chanceToCatch: Math.round((data.capture_rate * 100) / 255),
                    evolutionURL,
                    eggGroups: data.egg_groups.map(g => g.name)
                };
            });
        } catch (e) {
            console.log(e);
        }
    };
    fetchData();
}, [urlPokemonAPI, urlPokemonSpecies]);

do you see another problem: you call setPokemon two times, let's rewrite it again:

useEffect(() => {
    const fetchData = async () => {
        // import axios from 'axios';
        try {
            const result = await axios.get(urlPokemonAPI);
            const data1 = result.data;
            const result2 = await axios.get(urlPokemonSpecies);
            const data2 = result2.data;
            function resolveDescription(data) {
                let description = "";
                data.flavor_text_entries.forEach(i => {
                    const lang = i.language.name
                    if (lang === "en") {
                        description = i.flavor_text;
                    }
                });
                return description;
            }
            function resolveGenus(data) {
                let genus = "";
                data.genera.forEach(i => {
                    const lang = i.language.name;
                    if (lang === "en") {
                        genus = i.genus;
                    }
                });
                return genus;
            }

            setPokemon({
                img: data1.sprites.front_default,
                name: data1.name,
                weight: Math.round(data1.weight / 10),
                types: data1.types.map(i => i.type.name),
                abilities: data1.abilities.map(i => i.ability.name),
                moveList: data1.moves.map(i => i.move.name),
                height: data1.height / 10,
                description: resolveDescription(data2),
                genus: resolveGenus(data2),
                chanceToCatch: Math.round((data2.capture_rate * 100) / 255),
                evolutionURL: data2.evolution_chain.url,
                eggGroups: data2.egg_groups.map(g => g.name)
            });
        } catch (e) {
            console.log(e);
        }
    };
    fetchData();
}, [urlPokemonAPI, urlPokemonSpecies]);

Answer 2

state updater from hooks doesn't merge the state values when updating state, instead it just replaces the old value with new one

Since you use state updater like

 setPokemon(() => {
        return {
          img: img,
          name: name,
          weight: weight,
          types: types,
          abilities: abilities,
          moveList: moveList,
          height: height
        };
      });

eggGroups property is lost and hence it becomes undefined. You need to update it by spreading the previous state values obtained from callback

setPokemon((prev) => {
        return {
          ...prev
          img: img,
          name: name,
          weight: weight,
          types: types,
          abilities: abilities,
          moveList: moveList,
          height: height
        };
      });