React Firebase 无法取消订阅侦听器

Question

我正在尝试将Firebase实时数据库集成到我的一个项目中，该项目位于反应钩子中，并尝试按照代码读取数据并在卸载组件时取消订阅，但由于某种原因取消订阅未按预期工作并显示警告：

警告：无法对未挂载的组件执行 React 状态更新。这是无操作，但它表示应用程序中存在内存泄漏。若要解决此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。

useEffect(() => {
listenMessages();
return () => messageRef.off('value', listenMessages);
}, [chatroom]);  // here chat room comes from an asynchronous call
const [receivedMessages, updateReceivedMessages] = useState([]);
const listenMessages = () => {
if( chatroom !== null )
{
messageRef.child(chatroom)
.limitToLast(10)
.on('value', message => {
if (message.val() !== null)
{
let list = Object.values(message.val());
// Updating the state on every change and use this state to show messages inside render() function
updateReceivedMessages(list);
}
});
}
}

我已经尝试了SO和其他一些论坛的许多解决方案，但没有任何效果。有人请指导我我在这里做错了什么。

编辑：我已经通过将log()放在不同的地方对其进行了测试，我所理解的是listener仍未删除。

提前谢谢。

Answer 1

在没有参数的情况下调用该位置的off()会删除该位置的所有侦听器。

参考： https://firebase.google.com/docs/database/web/read-and-write#detach_listeners