我遇到了一個問題，即loadMorefirestore 的onSnapshot回呼中的狀態值 ( ) 與進入鉤子時的狀態值不同，我無法理解為什么。也許一些更聰明的靈魂將能夠發現問題：
useEffect(() => {
console.log("loadMore", loadMore); // returns false
if (cursor) {
onSnapshot(
query(
firestore
.collectionGroup("posts")
.orderBy("createdAt", "desc")
.startAfter(cursor)
.limit(POSTS_PER_REQUEST_LIMIT)
),
(querySnapshot) => {
console.log("loadMore", loadMore); // returns true
}
);
}
}, [cursor, loadMore]);
如您所見，問題在于，正如預期的那樣，loadMore === false當 useEffect 鉤子被觸發但onSnapshot' 的回呼函式仍然認為它是true. 為什么？我會繼續尋找答案，但與此同時，我會質疑自己的理智。感謝任何能提供幫助的人。
uj5u.com熱心網友回復：
似乎onSnapshot's success listener 具有陳舊的值。這可能是因為它是一個過時的偵聽器，當其中一個依賴項發生更改時需要取消訂閱。
FirestoreonSnapshot回傳一個函式，您可以使用該函式取消訂閱/清理過時的回呼。
您可以回傳該函式，useEffect它應該可以解決您的問題：
useEffect(() => {
if (cursor) {
const unsubscribe = onSnapshot(
query(
firestore
.collectionGroup("posts")
.orderBy("createdAt", "desc")
.startAfter(cursor)
.limit(POSTS_PER_REQUEST_LIMIT)
),
(querySnapshot) => {
console.log("loadMore", loadMore); // should be correct now
}
);
return unsubscribe;
}
}, [cursor, loadMore]);
您可以在 React 檔案中閱讀有關效果清理的更多資訊：https ://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/481469.html
上一篇：記錄時參考串列顯示未定義