Call async function while opening modal in React

Question

I have a functional component and in it I have a function that fetches the cart items of the current user and I want to call it when I am opening a modal (which will show a preview of the current cart items). This doesnt happen in the first moment when I open the modal, but only if I click again on the modal somewhere.

This is the code:


    const handleOpen = () => {
    
        fetchUserCart();
        console.log(currentUserCart);
        setOpen(true);
      
    };
    
    const fetchUserCart = async () => {

        const q = query(collection(db, "users"), where("uid", "==", user?.uid));
        const doc = await getDocs(q);
        const data = doc.docs[0].data();  
        setCurrentUserCart(data.cart);
        console.log(currentUserCart);

    }

You cannot console log updates during the same render like that. For 2 reasons - the state updates are queued and do not happen immediately, and the function must be called again (re-rendered) in order for your state variables to be assigned to their new values (the const's are stale) — Brian Thompson, Apr 15 '22 at 14:09

score 0 · Answer 1 · answered Apr 15 '22 at 14:13

You need to wait the end of fetchUserCart in handleOpen to log the result. At the first iteration it doesn't wait until your fetch function is finished to go to the next step console.log(currentUserCart);

Do something like this :

    const handleOpen = () => {
        fetchUserCart()
        .then(userCart => console.log(userCart))
      };
    
      const fetchUserCart = async() =>{
        const q = query(collection(db, "users"), where("uid", "==", user?.uid));
          const doc = await getDocs(q);
          const data = doc.docs[0].data();  
          setCurrentUserCart(data.cart);
          return (data.cart)
     }

Call async function while opening modal in React

1 Answers1