React应用集成Gun.js出现消息重复渲染与更新问题的排查求助

我刚仔细看了你的代码，问题根源在于Gun.js的订阅没有正确清理，再加上组件重复挂载时重复添加监听回调，导致同一条消息被多次推送到messages数组里，自然就出现重复显示的情况了。

问题分析 #

你的GunService是单例模式，所以messageListener始终是同一个引用，但每次组件挂载（比如路由切换后回到这个组件），useEffect里的map().on()都会注册一个新的回调函数。而Gun的on是持续订阅机制——不管是历史消息还是新消息，每个已注册的回调都会被触发一遍，这就导致同一条消息被多次添加到数组中。

另外，你用setMessages(prev => [...prev, message])的方式更新数组，每次回调触发都会直接往末尾追加消息，没有做去重处理，进一步加剧了重复问题。

修复方案 #

1. 首先：清理监听器，避免重复订阅

Gun的on()方法会返回一个用于取消订阅的函数，我们需要把它保存下来，在组件卸载时调用，这样就能防止多次挂载时积累无用的回调：

useEffect(() => {
  // 保存取消订阅的函数
  const unsubscribe = gunServices.messageListener?.map().on((message) => {
    setMessages(prev => [...prev, message]);
  });

  // 组件卸载时执行清理，取消订阅
  return () => {
    unsubscribe?.();
  };
}, []);

2. 可选优化：避免重复加载历史消息

上面的方案解决了重复订阅的问题，但如果组件重新挂载，Gun的map().on()还是会把所有历史消息重新推送一遍。你可以通过消息去重来解决这个问题——利用Gun自动给每个节点生成的唯一标识_['#']，或者自己给消息加自定义id：

useEffect(() => {
  const unsubscribe = gunServices.messageListener?.map().on((message) => {
    setMessages(prev => {
      // 用Gun自动生成的唯一id检查消息是否已存在
      const isDuplicate = prev.some(item => item._['#'] === message._['#']);
      if (!isDuplicate) {
        return [...prev, message];
      }
      // 已存在则不修改数组
      return prev;
    });
  });

  return () => {
    unsubscribe?.();
  };
}, []);

3. 小修正：日期时间的写法问题

你之前的date和time字段写法有错误：Date.now()返回的是数字类型的时间戳，直接调用toLocaleString()会报错。应该改成用Date对象来生成字符串：

const onSendMessage = () => {
  const now = new Date();
  const message = {
    senderUsername: "John Doe",
    senderId: "Doe---id",
    receiverUsername: "John Doe",
    receiverId: "zizou_id",
    message: messageValue,
    date: now.toLocaleDateString(),
    time: now.toLocaleTimeString(),
  };
  gunServices.sendMessage(message);
  setMessageValue("");
};

总结 #

最核心的问题是未清理Gun的订阅回调，导致多次挂载组件时积累了多个监听，每次消息变化都会触发所有回调造成重复。先加上订阅清理逻辑，再配合消息去重，就能彻底解决这个问题了。

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