React Native集成QuickBlox接收消息回调多次触发解决方案

云上老周

2026-8-29

问题根因

事件监听器重复绑定：监听器注册逻辑直接写在函数组件执行流中，没有做生命周期管控。组件每次因状态更新重渲染时，都会重新执行addListener逻辑给同一个事件发射器绑定新的回调，且旧的监听器没有被移除。单条消息推送到来时，所有历史绑定过的回调会依次触发，直接导致单条消息被多次处理、payload重复打印，且随着重渲染次数增加，重复触发的次数会越来越多。
闭包陷阱导致状态异常：消息处理函数直接读取当前渲染周期的chatData状态做数组展开，不同批次绑定的回调捕获的都是各自渲染周期的旧状态值，不仅会重复插入同一条消息，还可能出现新消息覆盖旧消息、列表丢消息的问题。
缺少兜底去重逻辑：没有基于消息唯一ID做存在性校验，无法拦截异常场景下的重复消息插入。

修复方案

按照以下三点调整代码即可解决问题：

将事件监听的注册逻辑移入useEffect，配置空依赖数组保证仅在组件挂载时注册一次监听，同时在effect的清理函数中移除监听器，从根源避免重复绑定。
状态更新使用函数式写法，直接基于前序状态计算新状态，绕开闭包对状态值的捕获问题。
追加消息前基于消息唯一ID做去重判断，作为兜底逻辑拦截弱网重连、SDK重推等场景下的重复消息。

修复后的核心实现代码：

import { useState, useEffect } from 'react';
import { NativeEventEmitter } from 'react-native';
// 其余业务导入、QB初始化逻辑保持原有实现不变

export default function ChatRoom() {
  const [chatData, setChatData] = useState([]);

  useEffect(() => {
    const chatEmitter = new NativeEventEmitter(QB.chat);
    
    const handleNewMessage = (event) => {
      const { payload } = event;
      const newMessage = {
        key: payload.id,
        body: payload.body,
        senderId: payload.senderId,
        dateSent: payload.dateSent,
      };

      setChatData(prevChatList => {
        // 同ID消息已存在时不重复插入
        const isDuplicate = prevChatList.some(msg => msg.key === newMessage.key);
        return isDuplicate ? prevChatList : [...prevChatList, newMessage];
      });
    };

    // 注册新消息监听
    const messageSubscription = chatEmitter.addListener(
      QB.chat.EVENT_TYPE.RECEIVED_NEW_MESSAGE,
      handleNewMessage
    );

    // 组件卸载时清理监听
    return () => {
      messageSubscription.remove();
    };
  }, []);

  // 原FlatList渲染逻辑保持不变
  return (
    // 原有页面JSX
    null
  )
}

补充说明：QuickBlox SDK在弱网重连、前后台切换场景下本身存在消息重推机制，消息ID去重的兜底逻辑建议永久保留，不要因为监听重复问题修复就删除。

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