useEffect 鈎子內部狀態變量的值不同（firestore onSnapshot 回調）

Question

我遇到了一個問題，即 firestore 的onSnapshot回調中的狀態值（ loadMore ）與進入鈎子時的狀態值不同，我無法理解為什么。 也許一些更聰明的靈魂將能夠發現問題：

   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]);

如您所見，問題在於，正如預期的那樣，當 useEffect 鈎子被觸發時loadMore === false但onSnapshot的回調函數仍然認為它是true 。 為什么？ 我會繼續尋找答案，但與此同時，我會質疑自己的理智。 感謝任何能提供幫助的人。

Answer 1

似乎onSnapshot的成功偵聽器具有陳舊的值。 這可能是因為它是一個過時的偵聽器，當其中一個依賴項發生更改時需要取消訂閱。

Firestore 的onSnapshot返回一個函數，您可以使用該函數取消訂閱/清理過時的回調。

您可以在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