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相反。因此，清除服务提供商阵列的东西。然后你想在卸载时打电话。也许设置服务提供者数组([](;所以。。。

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

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

Answer 2

最好得到一个沙盒示例或其他东西，看看你所做的实现是什么样子的。因为有很多方法可以做到这一点。

您可以做的是与侦听器挂钩，以便在每次需要新条件的数据时启动useEffect。

const [query, setQuery] = React.useState("posts");

useEffect(() => {
const posts = firebase
.firestore()
.collection(query)
.onSnapshot(function(querySnapshot) {
var postsArray = [];
querySnapshot.forEach(doc => {
postsArray.push(doc.data());
});
setServiceProviderArray(postsArray);
return posts.unsubscribe();
});
}, [query]);

这样，每次使用 setQuery(( 时，您的 postsArray 都会被重新填充。