我有一個使用 Firestore 的簡單 React 應用程式。我在 Firestore 中有一個檔案：
{
date: November 20, 2022 at 11:24:44 AM UTC 1,
description: "...",
title: "Dummy title",
type: "student",
userRef: /users/0AjB4yFFcIS6VMQMi7rUnF3eJXk2
}
現在我有一個自定義掛鉤，它可以獲取資料：
export const useAnnouncements = () => {
const [announcements, setAnnouncements] = useState([]);
useEffect(() => {
getAnnouncements().then((documents) => {
const documentsList = [];
documents.forEach((doc) => {
const document = { id: doc.id, ...doc.data() };
getUser(document.userRef).then((u) => {
document.user = u.data(); // <-- HERE is problem
});
documentsList.push(document);
setAnnouncements(documentsList);
});
});
}, []);
return [announcements];
};
問題是我有一個 REFERENCE 欄位型別，它必須單獨獲取。結果？我的串列已填充，但首先沒有用戶。稍后，當獲取用戶資料時，狀態不會更新。
React Firestore 的參考欄位如何處理？
uj5u.com熱心網友回復：
Array.prototype.forEach 不是為異步代碼設計的。（它不適合 promises，也不適合 async-await。）您可以改用 map。
useEffect(() => {
getAnnouncements().then((documents) => {
const promises = documents.map((doc) => {
return getUser(doc.userRef).then((u) => {
const document = { id: doc.id, user: u.data(), ...doc.data() };
return document;
});
});
Promise.all(promises).then((documentsList) => {
setAnnouncements(documentsList);
});
});
}, []);
uj5u.com熱心網友回復：
我認為您需要等待所有資料被獲取
export const useAnnouncements = () => {
const [announcements, setAnnouncements] = useState([]);
useEffect(() => {
let isValidScope = true;
const fetchData = async () => {
const documents = await getAnnouncements();
if (!isValidScope) { return; }
const allPromises = documents?.map(doc => {
return getUser(doc.userRef)
.then(user => {
return {
id: doc.id,
...doc.data(),
user: user.data()
}
})
}
const documentsList = await Promise.all(allPromises);
if (!isValidScope) { return; }
setAnnouncements(documentsList);
}
fetchData()
return () => { isValidScope = false }
}, []);
return [announcements];
};
希望它能以某種方式幫助
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/536979.html
標籤：Google Cloud Collective 反应火力基地google-cloud-firestore
上一篇：ReactRoute不使用path="/post/:slug"添加正斜杠
下一篇：如何在反應js中移動串列中的專案