React firebase 无法取消订阅监听器答案

【问题标题】：React firebase not able to unsubscribe the listenerReact firebase 无法取消订阅监听器
【发布时间】：2020-10-17 03:58:34
【问题描述】：

我正在尝试将 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 的解决方案，例如 this 以及其他一些论坛，但对我来说没有任何效果。有人请指导我在这里做错了什么。

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

提前致谢。

【问题讨论】：

在不带参数的位置调用 off() 会删除该位置的所有侦听器。检查链接firebase.google.com/docs/database/web/…
@Fraddy 使用 `messageRef.child('childnode_name').off(); 解决了这个问题。你是天才，非常感谢。如果您不介意，请将其发布为答案，以便我接受它，这将有助于将来的其他社区成员。

标签： reactjs firebase firebase-realtime-database react-hooks

【解决方案1】：

在不带参数的位置上调用 off() 会删除该位置的所有侦听器。

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

【讨论】：