Javascript Socket.io和Jquery附带了不需要的额外数据

场景：

2{"message":"e"}
1{"message":"e"}
2{"message":"e"}
(2) 1{"message":"e"}
2{"message":"e"} 
(3)1{"message":"e"}

• 当我打印聊天信息时，它会在

  msg

  中额外添加一条信息
• 当我记录它们时，我得到了这个为什么存储在状态an 额外对象值？

控制台日志：

2{"message":"e"}
1{"message":"e"}
2{"message":"e"}
(2) 1{"message":"e"}
2{"message":"e"} 
(3)1{"message":"e"}

代码片段

import React, { Component } from "react";
import io from "socket.io-client";
import "../../../Chat.css";
import $ from "jquery";
var socket = io();
export default class ChatLayout extends Component {
      constructor() {
        super();
        this.state = {
          message: ""
        };
        this.onSubmit = this.onSubmit.bind(this);
        this.onChange = this.onChange.bind(this);
      }

      componentDidMount() {}

      onSubmit(e) {
        e.preventDefault();
        socket.emit("chat message", this.state.message);
        socket.on("chat message", msg => {
          console.log("1" + JSON.stringify(this.state));
          $("#messages").append($("<li>").text(msg));
        });
        console.log("2" + JSON.stringify(this.state));
      }

      onChange(e) {
        this.setState({ [e.target.name]: e.target.value });
      }

      render() {
        return (
          <div className="chat">
            <ul id="messages">
              <div />
            </ul>
            <form action="" onSubmit={this.onSubmit}>
              <textarea
                name="message"
                placeholder="Enter your message here"
                autoComplete="off"
                type="submit"
                value={this.state.message}
                onChange={this.onChange}
              />
              <input type="submit" className="btn btn-info btn-block mt-4" />
            </form>
          </div>
        );
      }
    }

import React，{Component}来自“React”；
从“socket.io客户端”导入io；
导入“../../../Chat.css”；
从“jquery”导入$；
var socket=io（）；
导出默认类ChatLayout扩展组件{
构造函数（）{
超级（）；
此.state={
信息：“
};
this.onSubmit=this.onSubmit.bind（this）；
this.onChange=this.onChange.bind（this）；
}
componentDidMount（）{}
提交（e）{
e、 预防默认值（）；
发出（“聊天信息”，this.state.message）；
socket.on（“聊天信息”，msg=>{
log（“1”+JSON.stringify（this.state））；
$（“#消息”）.append（$（“
”）.text（msg））；
});
log（“2”+JSON.stringify（this.state））；
}
onChange（e）{
this.setState（{[e.target.name]：e.target.value}）；
}
render（）{
返回(


);
}
}

我认为这是因为您的

socket.on（“chat message”，function（））

声明在

onSubmit

函数中。我猜这样做会在每次提交表单时添加某种套接字侦听器，这可以解释为什么第二次收到消息两次，第三次收到消息三次

解决方案

尝试将

socket.on

语句移动到

onSubmit（）函数的外部

换言之，把：

socket.on("chat message", msg => {
  console.log("1" + JSON.stringify(this.state));
  $("#messages").append($("<li>").text(msg));
});

socket.on（“聊天信息”，msg=>{
log（“1”+JSON.stringify（this.state））；
$（“#消息”）.append（$（“
”）.text（msg））；
});

在构造函数中或在类外。
哈哈哈，这正是发生的事情。回答得好，我的朋友。