I have tried most of the answers to similar questions but nothing worked for me. I tried to add the state "goods" to the useEffect dependency but it kept reloading forever and I also tried to put a callback to the setState and then console.log state and it still didn't work.
const [goods, setGoods] = useState(null);
useEffect(() => {
const fetchListings = async () => {
try {
//get refrence
const listingRef = collection(db, "goods");
console.log(listingRef);
//create query
const q = query(listingRef, limit(10));
const querySnap = await getDocs(q);
//execute query
let fetchedItems = [];
console.log(fetchedItems);
querySnap.forEach((doc) => {
console.log(doc.data());
console.log(doc.id);
return fetchedItems.push({
id: doc.id,
data: doc.data(),
});
});
setGoods({ ...fetchedItems, id: fetchedItems.id });
setGoods({ ...fetchedItems, data: fetchedItems.data });
console.log(goods);
} catch (error) {
console.log(error);
}
};
fetchListings();
}, []);