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 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)
}