Why my useEffect don't work ? And why the asynchrone function don't work?-CodePudding

I don't understand why my "console.log(champion)" return nothing ... Someone can explain me why the asynchrone function don't work ? Isn't setCahmp supposed to change the value of "champions"? I guess it because axios take sometime to search datas... I don't know how I could fix it. And then I would like to map "champion" but its an object, how I could do that ?

Thans you

import React, { useEffect, useState } from "react";
import axios from "axios";

const Champs = () => {
  const [champions, SetChampions] = useState([]);

  useEffect(() => {
    axios
      .get(
        "http://ddragon.leagueoflegends.com/cdn/12.5.1/data/en_US/champion.json"
      )
      .then((res) => {
        SetChampions(res.data.data);
        console.log(res.data.data);
      })
      .then(
        console.log(champions)
      );
  }, []);

  return (
    <div className="champs">
      {/* {champions.map((champ) => {
        return <p> {champ.id}</p>;
      })} */}
    </div>
  );
};

export default Champs;

CodePudding user response：

In your API response response.data.data is not an array of objects, it's nested objects and you are initializing the champions as an array. So, setChampions can't assign an object to an array.

Also, you can't use the map function to loop an object. You can use Object.keys to map the response.

CodePudding user response：

You shouldn't do a double "then" on your code. If you want to know when the state champions is set you should use a second useEffect with "champions" in param :

  useEffect(() => {
    axios
      .get(
        "http://ddragon.leagueoflegends.com/cdn/12.5.1/data/en_US/champion.json"
      )
      .then((res) => {
        SetChampions(res.data.data);
        console.log(res.data.data);
      });
  }, []);

  useEffect(() => {
    console.log(champions)
  }, [champions]);

If you want to map an object you should do this :

<div className="champs">
  {Object.keys(champions).map((key) => {
    const champ = champions[key]
    return <p> {champ.id}</p>;
  })}
</div>

Object.keys will return an array of key of your object, so you can map it. And to access to the value you can simply use the key like this : const champ = champions[key]

Hoping that can help you in your research

CodePudding user response：

It could be that console.log(champion) isn't working because it's getting called before SetChampion is completed. You don't need the 2nd .then() call to check on champion. To make sure champion is getting set, you could make a useEffect that is called whenever champion gets set, like so:

useEffect(() => {
  console.log(champion);
}, [champion])

This will get called when champion is initially set to [] with useState, and then when you set it with SetChampions().