reactjs - cleanup() 在 useEffect() 中无法使用 Firebase Firestore onSnapshot

Question

我有一个 React 项目，它使用 onSnapshot() 监听器列出来自 Firestore 的数据。

一切正常，但是当我导航到一个新页面(它也有一个与上一页相同的列表，但数据不同)时，上一个列表中的数据仍然显示在新页面上。只有当我点击页面某处时，新数据才会显示。

例子:

/home 显示我的帖子列表。

/friends 显示我的好友列表。

当我从 /home 点击 /friends 时，我仍然可以看到我的帖子列表。

我试过像这样卸载监听器:

  useEffect(() => {

      const posts = firebase
        .firestore()
        .collection('posts')
        .onSnapshot(function(querySnapshot) {

          var postsArray = [];

          querySnapshot.forEach(doc => {
              postsArray.push(doc.data());
          });

      setServiceProviderArray(postsArray);

      return function cleanup() {
          posts()
    };

  }, []);

但这并不能解决问题。

我正在使用 React-Router-Dom 进行路由。

这里有什么我遗漏的吗？非常感谢。

Answer 1

这有点令人困惑:

 return function cleanup() {
          posts()
    };

您希望 cleanup() 做什么？

在这种情况下，return () => posts(); 位将在组件卸载时取消订阅您的实时监听器。这只是意味着，如果在卸载组件时 firestore 数据库发生变化，您将无法使用新数据进行更新。很好，不要改变你在这里做的事情。如果您不取消订阅，即使该组件不在页面上，您仍然会收到更新，最终会出现内存泄漏。更多关于在这里分离监听器的信息 https://firebase.google.com/docs/firestore/query-data/listen#detach_a_listener

听起来你想做的是在卸载时清除数据。为此，您必须编写一个清除它的函数。 setServiceProviderArray 的功能相反。所以清除服务提供者数组的东西。然后你想在卸载时打电话。也许 setServiceProviderArray([]);所以……

return () => {
  posts()
  clearServiceproviderArray()
};

也许 setServiceProviderArray([]) 会起作用。如果这不能解决问题，请共享 setServiceProviderArray() 的代码，我们可以通过编写相反的功能来帮助您创建 clearServiceproviderArray()。