Question

我正在尝试将Firebase实时数据库集成到我的一个项目中，该项目位于react挂钩中，并尝试按照以下代码读取数据并取消订阅已卸载的组件，但是由于某些原因，取消订阅无法按预期方式工作，并且显示警告：

警告：无法在已卸载的组件上执行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);
            }
        });
    }
}

我已经尝试过this之类的解决方案，也尝试过其他一些论坛的解决方案，但对我来说却无济于事。有人可以指导我在这里做错什么。

编辑：我已经通过将log()放在不同的位置进行了测试，而我了解到listener仍然没有删除。

谢谢。

Answer 1

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

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

React Firebase无法取消订阅侦听器

1 个答案: