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

如您所见，问题是，正如预期的那样，loadMore === false 当 useEffect 挂钩被触发时，但 onSnapshot 的回调函数仍然认为它是 true。为什么？我会继续寻找答案，但与此同时，我会质疑自己的理智。感谢任何能提供帮助的人。

Answer 1

onSnapshot 的成功监听器似乎有过时的值。这可能是因为它是一个过时的侦听器，当其中一个依赖项发生变化时需要取消订阅。

Firestore 的 onSnapshot return 是一个可用于取消订阅/清理过时回调的函数。

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

useEffect 挂钩中状态变量的值不同（firestore onSnapshot 回调）

Value of state variable different inside useEffect hook (firestore onSnapshot callback)

typescript

reactjs

google-cloud-firestore

react-hooks

use-effect