useEffect: How to put data in the state in order

user_17926714 0
Viewed 388

I'd like to ask how to retrieve data through use Effect.
The flow I want is as follows.
First, I want to get the 'cards' state, fill the cards with data, and then fill the data through the cardsPromises after that.
But my code couldn't get cards and wordAll, and the empty value came out.
I think it's because the cards are still empty, but I don't know how to operate in order.
Please tell me how to do it.

  const [wordAll, setWordAll] = useState([]);
  const [cards, setCards] = useState([]); 

  useEffect(() => {
    axios
      .get("http/api/words/", {
        headers: {
          Authorization: cookies.token,
        },
      })
      .then((response) => {
        setCards(response.data);
      })
      .catch((error) => {
        console.log(error);
      });

    const cardsPromises = cards.map((contents) =>
      axios.get(
        `http/api/words/detail_list/?contents=${contents.contents}`,
        {
          headers: {
            Authorization: cookies.token,
          },
        }
      )
    );
    console.log("cards", cards);

    Promise.all(cardsPromises)
      .then((response) => {
        console.log("resp", response.data);
        setWordAll(response.data);
      })
      .catch((error) => {
        console.log("err==>", error);
      });
  }, []);
axios use-effect react-hooks reactjs
2 Answers

You are correct, cards array is still empty in the useEffect callback when the fetching the data. I suggest converting to async/await and waiting for the first fetch to resolve and using that value of cards for the fetching of the rest of the data.

const [wordAll, setWordAll] = useState([]);
const [cards, setCards] = useState([]); 

useEffect(() => {
  const fetchData = async () => {
    try {
      const{ data: cards } = await axios.get(
        "http/api/words/",
        {
          headers: {
            Authorization: cookies.token,
          },
        },
      );
      setCards(cards);

      const cardsPromises = cards.map((contents) =>
        axios.get(
          `http/api/words/detail_list/?contents=${contents.contents}`,
          {
            headers: {
              Authorization: cookies.token,
            },
          }
        );
      );
      const wordAllResponse = await Promise.all(cardsPromises);
      const wordAll = wordAllResponse.map(({ data }) => data);
      setWordAll(wordAll);
    } catch (error) {
      // handle any errors, rejected Promises, etc..
    }
  };

  fetchData();
}, []);
user_86908570

Wrap your 2nd axios call inside a function, and call it after 1st axios call returns.

useEffect(() => {

  const getWords = (cards) => {
    const cardsPromises = cards.map((contents) =>
      axios.get(
        `http/api/words/detail_list/?contents=${contents.contents}`,
        {
          headers: {Authorization: cookies.token}
        }
      )
    );

    Promise.all(cardsPromises)
      .then((response) => {
        setWordAll(response.data);
      })
      .catch((error) => {
        console.log("err==>", error);
      });
  })

  axios
    .get("http/api/words/", {
      headers: { Authorization: cookies.token },
    })
    .then((response) => {
      const cards = response.data;
      setCards(cards);
      getWords(cards);
    })
    .catch((error) => {
      console.log(error);
    });
}, [])

Now dependency chain is clearer.

user_169977070
Related