React state is not updated

Question

I'm new to react. My problem is that after the fetch the state of allCards is being changed but not the state of currentCard and showCard.

 const [showCard, setShowCard] = useState(false)

  const [allCards, setallCards] = useState<CardProp[]>([]);
  const [currentCard, setcurrentCard] = useState<CardProp>();

  function getRandomCard() {
    return allCards[Math.floor(Math.random() * allCards.length)];
  }
  function updateCard() {
    setcurrentCard(getRandomCard());
  }

  const fetchCards = async () => {
    const cardRequest = await fetch("/api/card", {
      headers: {
        "Content-Type": "application/json",
        Authorization: token!,
      },
    });
    console.log(cardRequest);
    if (cardRequest.status === 200) {
      const cardJSON = await cardRequest.json();
      setallCards(cardJSON.cards);
    }
  };

  useEffect(() => {
    fetchCards();

    if (allCards.length > 0) {
      setcurrentCard(getRandomCard());
      setShowCard(true);
    }
  }, []);

Answer 1

Have 2 use effects to do the updates as follows.

For initial rendering, to fetch cards

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

To update current cards

  useEffect(() => {
    if (allCards.length > 0) {
      setcurrentCard(getRandomCard());
      setShowCard(true);
    }
  }, [allCards]);

Answer 2

Because fetchCards is asynchronous so if condition will not run in the componentDidMount (the initial of allCards is [])

You should put this logic in the other useEffect with dependencies is allCards. It will run when allCards was update after fetch success.

useEffect(() => {
  if (allCards.length > 0) {
    setcurrentCard(getRandomCard());
    setShowCard(true);
  }
}, [allCards]);

Answer 3

Your fetchCards() is an asyncronous method. Also, setState in ansynchronous.You can use additional useEffect with a dependency in like this:

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

  useEffect(() => {
     if (allCards.length > 0) {
       setcurrentCard(getRandomCard());
       setShowCard(true);
     }
  }, [allCards]);

You have two useEffect, one with empty array for componentDidMount, and one another to react to change of allCards