下面的代碼適用于從 Firestore 獲取我的資料。我正在嘗試更新它以使用onSnapshot()而不是get(). 也許我的困惑的核心是onSnapshot()沒有回傳一個承諾，我已經嘗試將偵聽器添加到一個陣列中，但似乎資料沒有得到更新。如何遍歷'sfor回圈onSnapshot()并呈現結果？
const [activityDataArray, setActivityDataArray] = useState([]);
const userActivityIds = userData.activities
useEffect(() => {
let promises = [];
for (const activityId of userActivityIds) {
promises.push(getFirestoreData("activities", activityId));
}
Promise.all(promises).then(response => setActivityDataArray(response));
}, [userActivityIds]);
更新的代碼：當我console.log()使用陣列時，它有我的資料，但我認為這是 chrome 開發工具顯示新資訊的一個技巧。我認為當我呼叫setActivityDataArray它時，它會在一個空陣列上運行它，然后它就再也不會被呼叫了。因此，除非我切換到應用程式中的其他選項卡并回傳，否則資料不會呈現。然后它會正確渲染（所以我知道資料很好，這只是一個渲染問題）。我想我需要在內部重新渲染，onSnapshot()但我該如何正確地做到這一點？
const [activityDataArray, setActivityDataArray] = useState<any>([]);
const userActivityIds: string[] = userData.activities
useEffect(() => {
let activityDataArrayDummy: any[] = []
for (const i in userActivityIds) {
firebase.firestore().collection("activities").doc(userActivityIds[i])
.onSnapshot((doc) => {
activityDataArrayDummy[i] = doc.data();
});
}
console.log("activityDataArrayDummy", activityDataArrayDummy)
setActivityDataArray(activityDataArrayDummy);
}, [userActivityIds]);
uj5u.com熱心網友回復：
onSnapshot()只需在回圈中呼叫就可以了。
import { doc, onSnapshot } from "firebase/firestore";
for (const activityId of userActivityIds) {
// get reference to document
const docRef = doc(db, "activities", activityId)
onSnapshot(docRef, (snapshot) => {
// read and render data from snapshot
})
}
但是，如果您需要取消訂閱任何偵聽器，那么您可能必須將
某處Unsubscribe回傳的函式存盤在 state 中。onSnapshot
以防萬一您有 10 個或更少的專案，userActivityIds那么您可以使用onSnapshot()aQuery代替：
const q = query(collection(db, "activities"), where(documentId(), "in", userActivityIds));
onSnapshot(q, (querySnapshot) => {
// ...
})
uj5u.com熱心網友回復：
我帶著這個去了。顯然，反應中的狀態不能保證被更新，因此使用更新資料設定狀態的正確方法是使用回呼函式。
https://reactjs.org/docs/state-and-lifecycle.html#state-updates-may-be-asynchronous
const [activityDataObj, setActivityDataObj] = useState({})
const userActivityIds: string[] = userData.activities
useEffect(() => {
for (const i in userActivityIds) {
firebase.firestore().collection("activities").doc(userActivityIds[i])
.onSnapshot((doc) => {
setActivityDataObj((activityDataObj) => {
return {...activityDataObj, [userActivityIds[i]]: doc.data()}
})
});
}
}, [userActivityIds]);
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/449593.html
標籤：javascript 反应 火力基地 谷歌云平台 谷歌云火库