Fetching an array of objects from POKEAPI using REACT.js and AXIOS-CodePudding

I chose to start learning API handling with POKEAPI. I am at a step where I need to get the flavor_text of each pokemon (the description let's say) but I can't for some reason.

Here is the JSON structure for one specific pokemon: https://pokeapi.co/api/v2/pokemon-species/bulbasaur.

And here is my useEffect trying to get it. The line fetching the habitat works and displays on my website so I guess my issue comes from my map in setDescription but I can't be sure.

export default function Card({ pokemon }, { key }) {
  const src = url   `${pokemon.id}`   ".png";
  const [habitat, setHabitat] = useState(null);
  const [descriptions, setDescriptions] = useState([]);

  useEffect(() => {
    const controller = new AbortController();
    axios
      .get(url2   `${pokemon.name}`, { signal: controller.signal })
      .then((res) => setHabitat(res.data.habitat.name))
      .then((res) =>
        setDescriptions(
          res.data.flavor_text_entries.map((ob) => ob.flavor_text)
        )
      )
      .catch((err) => {
        if (axios.isCancel(err)) {
        } else {
          console.log("warning your useEffect is behaving");
        }
      });
    return () => {
      // cancel the request before component unmounts
      controller.abort();
    };
  }, [pokemon]);

I tried console logging descriptions or descriptions[0] but that doesn't work.

CodePudding user response：

Since you only setting up the state from those data and it doesn't looks like the second result need to wait the result from the first to perform you can do both on the same response/promise :

useEffect(() => {
    const controller = new AbortController();
    axios
      .get(url2   `${pokemon.name}`, { signal: controller.signal })
      .then((res) => {
        setHabitat(res.data.habitat.name))
        const flavorTextEntrieList =  res.data.flavor_text_entries;
        setDescriptions(flavorTextEntrieList.map((ob) => ob.flavor_text))
        })
      .catch((err) => {
        if (axios.isCancel(err)) {
        } else {
          console.log("warning your useEffect is behaving");
        }
      });
    return () => {
      // cancel the request before component unmounts
      controller.abort();
    };
  }, [pokemon]);

CodePudding user response：

Each then need to return something to be handled in next chainable then. Replace .then((res) => setHabitat(res.data.habitat.name)) with .then((res) => { setHabitat(res.data.habitat.name); return res; })