javascript - Socket.io 和 Jquery 附带不需要的附加数据

Question

场景:

• 当我打印出聊天消息时，它会向 msg 添加一个额外的信息。
• 当我用控制台记录他们时，我得到了这个。 为什么它存储在状态 额外的对象值(value)？

控制台日志:

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>
        );
      }
    }

Answer 1

我认为这是因为您在 onSubmit 函数中声明了 socket.on("chat message", function()) 。我想这样做会在您每次提交表单时添加某种套接字监听器，这可以解释为什么第二次收到两次消息而第三次收到三次消息。

解决方案

尝试将 socket.on 语句移到 onSubmit() 函数之外。

换句话说，把:

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

在您的构造函数中或类之外。