useEffect我在我的鉤子中設定了這個 Firebase Firestore 查詢：
const [favorites, setFavorites] = useState([]);
const { user, setUser } = useContext(AuthenticatedUserContext);
const getUserFavorites = async () => {
const favoritesRef = collection(db, "favorites");
const q = query(favoritesRef, where("userId", "==", user.uid));
const querySnapshot = await getDocs(q);
const fetchedFavorites = [];
querySnapshot.forEach(async (document) => {
const docRef = doc(db, "receipes", document.data().recipeId);
const docSnap = await getDoc(docRef);
const data = docSnap.data();
fetchedFavorites.push(data);
});
setFavorites(fetchedFavorites);
console.log("favorites " favorites);
};
useEffect(() => {
getUserFavorites();
}, []);
在第一次渲染頁面時，favorites它將[]被填充，并且在重新渲染之后它將被填充。在登錄時，forEach我可以看到查詢正在運行，所以我懷疑異步forEach是這里的罪魁禍首。我怎樣才能解決這個問題？
uj5u.com熱心網友回復：
是的，您不應該使用async帶有forEach()回圈的函式。您可以使用for-of具有相同代碼的回圈或使用Promise.all()如下所示：
const getUserFavorites = async () => {
const favoritesRef = collection(db, "favorites");
const q = query(favoritesRef, where("userId", "==", user.uid));
const querySnapshot = await getDocs(q);
const favPromises = querySnapshot.docs.map((d) => getDoc(doc(db, "receipes", d.data().recipeId)))
const fetchedFavs = (await Promise.all(favPromises)).map((fav) => fav.data());
setFavorites(fetchedFavs);
console.log("favorites " fetchedFavs);
};
還結帳：使用 async/await 和 forEach 回圈以獲取更多資訊。
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/505223.html
標籤：Google Cloud Collective 反应 火力基地 谷歌云火库 异步等待