javascript - Socket.io 和 Jquery 带来了不需要的额外数据

Question

设想 ：

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

控制台日志：

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

标签： javascriptjqueryreactjssocket.io

Answer 1

我认为那是因为您在函数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));
});

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