每当我发送味精时，它都会在反应中多次显示相同的消息

上面的img显示了这个问题。您也可以在右下角检查控制台我正在使用套接字io react节点在一对一聊天网站上工作，表示我正面临此问题，例如：当我键入hi时，hi会显示1次，当我键入hii时，它会显示第2次，当我第三次键入jo时，它将显示jo 3次如何解决此问题，这是我的反应代码。另外，我的消息未在另一端接收，仅在发件人页面上显示

import React, { Component } from 'react';
import { Link,Redirect } from 'react-router-dom';
import UserService from "../services/userservice";
import {getUsersFriend} from "../services/messageservice";
import io from "socket.io-client";
const SOCKET_IO_URL = "http://localhost:4000/";

export default class Messages extends Component {
    constructor(props){
        super(props)
        this.socket = io(SOCKET_IO_URL)
        this.state = {
            currentUser: UserService.getCurrentUser(),
            isLoading:false,
            userdetails:[],
            show:false,
            username:'',
            message:'',
            socketConnected:false,
            messages:[]
        };
        this.onTextboxChangeMessage = this.onTextboxChangeMessage.bind(this)
    }

    componentDidMount(){
        const {currentUser}=this.state
        this.fetchUser()
        this.socket.on('connect',()=> {
            this.setState({ socketConnected : true})
            // console.log("connection")
        })
    }

    async fetchUser(){
        try{
            const {currentUser} = this.state
            console.log(currentUser)
            const data = { userid : currentUser.user._id }
            console.log(data)
            let user = await getUsersFriend(data)
            this.setState({ userdetails: user });
            // console.log(user)
        }catch(err){
            console.log(err)
        }
    }

    showMessageSpace(elementusername){
        this.setState({
            show: true,
            username:elementusername
        });
    }

    onTextboxChangeMessage(e){
        this.setState({ message:e.target.value})
    }

    SendMessage(e,senderid,receiverusername,message,senderusername){
        e.preventDefault();
        e.stopPropagation()
        console.log('event', e)
        const {messages} =this.state
        if(this.state.socketConnected){
            console.log('if condition test',senderid,receiverusername,message,senderusername )
            this.socket.emit('send',{senderid,receiverusername,message,senderusername});
            this.socket.on(`${receiverusername}`, (d)=>{
                if(this.state[`${receiverusername}`]?.length >= 1 ){
                    let messageList = this.state[`${receiverusername}`]
                    this.setState({[`${receiverusername}`]:[...messageList,d]})
                }
                else{
                    this.setState({[`${receiverusername}`]:[d]})
                    console.log('else Condition store individual messages', this.state[`${receiverusername}`])
                }
        }
        this.setState( { message:'' })
    }

    

    render(){
        const { currentUser ,isLoading,userdetails,message,messages} = this.state;
        // console.log(messages)
        if (isLoading) {
            return (<div><p>Loading...</p></div>);
        }

        if(!currentUser){
            return(
                <div>
                    <Redirect  to='/login' />
                </div>
            )
        }
        else{
        return(
            <div>
                <h1>Messages</h1>
                <div>
                    <p>Users</p>
                    {' '}
                    <ul className="collection">
                        {userdetails.map((element) => {
                            return(
                                <div key={element._id}>
                                    <li><Link to={`/dashboard/profile/:${element._id}`}>{element.username}</Link>{' '}<input 
                                    type="button" 
                                    id={element._id}
                                    value="Message"
                                    onClick={this.showMessageSpace.bind(this,element.username)} ></input></li>
                                </div>
                            );
                        })
                        }
                    </ul>
                    {' '}
                </div>
                {' '}
                    <Link to="/dashboard">Dashboard</Link>
                {' '}
                <div>
                {
                    this.state.show &&
                    (<div>
                        <h2>Username : {' '}{this.state.username}</h2>
                        {' '}
                        <div>
                            <h3>Body</h3>
                            <div>
                                <ul>
                                {/* { this.state[`${this.state.username}`]?.map((msg,key) =>{ */}
                                {this.state.username?.length > 0 && this.state[`${this.state.username}`]?.map((msg,key) =>{
                                    return(<li key={key}>{msg.senderusername}<span>{' '}{msg.message}</span></li>);
                                })
                                }
                                </ul>
                            </div>
                        </div>
                        {' '}
                        <div>
                            {' '}
                            <input 
                            type="text"
                            name="message"
                            value={message}
                            onChange={this.onTextboxChangeMessage}
                            ></input>
                            <button className='btn btn-info' onClick={(e)=> {this.SendMessage(e,currentUser.user._id,this.state.username,this.state.message,currentUser.user.username)}}>Send</button>
                        </div>
                        {' '}
                    </div>)
                    }
                </div>
            </div>
        )
        }
    }
}

服务器代码：

io.on('connection', (socket) => { /* socket object may be used to send specific messages to the new connected client */
  console.log('connection established',socket.id);
  socket.on('send', (data)=>{
    console.log("Receive data from single username",data)
     io.emit('message',data)
     socket.on('message',data => {
        console.log("private")
        io.to(data.receiverid).emit('message',data)
     })
  });
  
  socket.on('disconnected',()=>{
    console.log("disconnect")
  })
});