为什么Gun.js复制ReactJs中的消息

Question

我在react中实现gun.js，在每次呈现和每次更新上都重复application.But消息。有人能帮我找出我的代码出了什么问题吗。

这是我的密码。

import Gun from "gun/gun";
import { IGunChain, IGunInstance } from "gun/types";

class GunService {
public gun: IGunInstance<any> | undefined;
public messageListener:
| IGunChain<any, IGunInstance<any>, IGunInstance<any>, "messages">
| undefined;

  constructor() {
     this.gun = Gun("http://localhost:4000" + "/gun");
     this.messageListener = this.gun.get("messages");
   }

   public sendMessage(message: any) {
   this.messageListener?.set(message);
   }
 }
export const gunServices = new GunService();

然后在我的组件中:获取每个新更新的消息

   useEffect(() => {
     gunServices.messageListener?.map().on((message) => {
     setMessages((prevMessage) => [...prevMessage, message]);
   });
  }, []);

发送消息功能

      const onSendMessage = () => {

       const message = {
       senderUsername: "John Doe",
       senderId: "Doe---id",
       receiverUsername: "John Doe",
       receiverId: "zizou_id",
       message: messageValue,
       date: Date.now().toLocaleString(),
       time: Date.now().toLocaleString(),
    };

     gunServices.sendMessage(message);
     setMessageValue("");
  };

Answer 1

我对此的简单修正是添加useRef()

   import { useState, useRef, useEffect } from "react"; 

   useEffect(() => {
     if (loaded.current !== false) return; // Added

     gunServices.messageListener?.map().once().on((message) => {
     setMessages((prevMessage) => [...prevMessage, message]);

     loaded.current = true; // Added
   });
  }, []);