React组件中切换Firebase .on监听子节点并停止旧监听的方法

这个问题的核心很明确：当你切换聊天ID时，没有移除之前绑定的Firebase监听器，导致多个监听器同时在监听不同的messages子节点。要解决这个问题，我们需要在聊天ID变化时，先清除旧的监听器，再创建新的监听，同时还要在组件卸载时清理监听器避免内存泄漏。

下面是具体的修改步骤和代码示例：

1. 保存Firebase引用到组件实例 #

首先，我们需要在组件内部保存当前的Firebase数据库引用，这样后续才能调用off()方法移除监听。在组件的构造函数里初始化一个实例变量：

class MessageBody extends Component {
  constructor(props) {
    super(props);
    // 用于保存当前的消息节点引用
    this.currentMessageRef = null;
  }
  // ... 其他代码
}

2. 修改监听逻辑，添加旧监听器移除步骤 #

更新你的getMessages方法，在创建新监听前，先检查是否存在旧的引用，如果有就移除对应的监听器：

getMessages = () => {
  const db = firebase.database();
  // 移除旧监听器（如果存在）
  if (this.currentMessageRef) {
    // 移除针对'value'事件的监听，也可以直接调用off()移除该节点所有监听
    this.currentMessageRef.off('value');
  }
  // 创建新的监听引用
  this.currentMessageRef = db.ref().child('messages').child(this.props.currentChatId);
  this.currentMessageRef.on('value', snap => {
    console.log("CHAT ID IN SNAP: ", this.props.currentChatId);
    this.props.onGotMessageContent(snap.val());
  });
};

3. 监听props变化，切换聊天时重新绑定监听 #

当currentChatId这个props发生变化时，我们需要触发监听器的切换。使用componentDidUpdate生命周期方法来检测props变化：

componentDidMount() {
  this.getMessages();
}

componentDidUpdate(prevProps) {
  // 当聊天ID变化时，重新获取消息并绑定新监听
  if (prevProps.currentChatId !== this.props.currentChatId) {
    this.getMessages();
  }
}

4. 组件卸载时清理监听器 #

为了避免组件卸载后仍有监听器残留导致内存泄漏，在componentWillUnmount里移除最后的监听器：

componentWillUnmount() {
  if (this.currentMessageRef) {
    this.currentMessageRef.off('value');
  }
}

额外小提醒 #

看你的reducer代码里，case分支调用的是newMessageReceived(state, action)，但你定义的处理函数是addSelectedChatToState，这应该是个笔误，记得修正过来，否则你的Redux状态可能不会正确更新哦。

这样修改后，每次切换聊天ID时，旧的监听器会被及时移除，只有当前选中的聊天节点会被监听，就不会再出现多个聊天更新同时触发日志的情况了。

内容的提问来源于stack exchange，提问作者user8467470