更新
@Chris 下面的回答幫助我解決了我的問題。安裝了React Firebase Hooks包并設定了我的代碼，如下所示。現在一切都完美無缺！:)
const [value] = useCollection(collection(db, `${sessionUserId}`), {
snapshotListenOptions: { includeMetadataChanges: true },
})
useEffect(() => {
if (value) {
const allData = JSON.parse(
JSON.stringify(
value?.docs.map((doc) => ({
id: doc.id as string,
resultData: doc.data() as DocumentData,
}))
)
)
setAllLogs(allData)
}
}, [value])
我在我的專案中使用什么？NextAuthjs、Firebase、Recoiljs
我有一個 useRecoilState 掛鉤來保存用戶創建的日志。
const [allLogs, setAllLogs] = useRecoilState(modalAllLogs)
modalAllLogs看起來像這樣：
export const modalAllLogs = atom<Array<DocumentData>>({
key: 'allLogs',
default: [],
})
這是問題所在。我有一個 useEffect 掛鉤，它從資料庫中獲取用戶擁有的資料并分配setAllLogs給該資料。注意：我*沒有*在其他任何地方更新狀態。
useEffect(() => {
const docQuery = query(
collection(db, `${sessionUserId}`),
orderBy('timestamp', 'desc')
)
const unsubscribe = onSnapshot(
docQuery,
(snapshot: QuerySnapshot<DocumentData>) => {
const data = JSON.parse(
JSON.stringify(
snapshot.docs.map((doc: QueryDocumentSnapshot<DocumentData>) => ({
id: doc.id as string,
resultData: doc.data() as DocumentData,
}))
)
)
setAllLogs(data)
}
)
return unsubscribe
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [db])
發生的情況是，在初始渲染時，allLogs回傳一個空陣列，這是有道理的，但在我在 useEffect 鉤子所在的同一檔案中進行任何編輯之前保持空，保存它，然后 NextJS 觸發它的快速渲染，然后才allLogs突然顯示資料正確。我做了一個并且在每次初始渲染console.log(snapshot)時它也是空的。
每當我使用我創建的輸入添加資料時，Firebase 都會正確且正確地存盤所有資料。唯一的問題是資料未在初始渲染時加載。除此之外，我沒有其他問題。
我不確定我在這里做錯了什么。也許是RecoilState我用錯了？
我從其他論壇嘗試了很多事情——將依賴項更改為 allLogs（這給了我一個無限回圈），嘗試使用getDocs()而不是onSnapshot()，等等。
uj5u.com熱心網友回復：
這里的問題是，useEffect 沒有被觸發，因為“db”常量沒有改變。
查看 Firebase/firestore 的這些自定義掛鉤https://github.com/CSFrequency/react-firebase-hooks/tree/master/firestore 或提升 onSnapshot 以獲得實時結果。但在最后一種情況下，渲染不會被觸發，所以我認為最好使用自定義鉤子。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/531023.html
標籤：Google Cloud Collective 反应火力基地谷歌云火库反应钩子下一个.js