Socket.io отправляет несколько сообщений

Question

Я знаю, что есть много подобных вопросов, но я просмотрел многие из них, но я не могу решить мою проблему.

У меня есть приложение Tic-Tac-Toe, которое я пытаюсь встроить в реакцию, я впервые использую его, так что я не получаю компонент, дочерний рендер, и я думаю, что это моя проблема, но я не знаю как это исправить.

Я создаю этот список активных пользователей, пользователей, вошедших в систему с помощью firebase, и когда один из них нажимается, я хочу отправить emit и создать комнату, где они могут играть в крестики-нолики в отдельной комнате. Мне удалось исправить это, но по какой-то причине я время от времени получаю испускаемые файлы из socket.io, такие как «клиент ответа в чате» и «char_request» (см. Код ниже). Могу ли я как-то обойти эту проблему, я подозреваю, что это как-то связано с re-render / setState, но я чувствую, что все перепробовал.

Функция рендеринга в компоненте LiveUsers:

render() {

    if(this.state.play) {
      return (
        <React.Fragment>
          <Play userid= {Room} turn={this.state.starter} myColor={myColor} opponentColor={opponentColor}/>
        </React.Fragment>

      );
    }else {
    return (
      <React.Fragment>
      <h1>Pick a user to play against</h1>
      <img class="imageBlue" src={this.state.imageBlue} alt=""/>
      <img class="imageYellow" src={this.state.imageYellow} alt=""/>
      <img class="imageBlue2" src={this.state.imageBlue} alt=""/>
      <div className="userlistconent">
        <ul className="userlist">
          {this.renderListBody()}
        </ul>
      </div>
      </React.Fragment>
    );
  }
  }

Мои слушатели сокетов в LiveUser:

componentDidMount() {

    let t = this;
    this.props.socket.on('live_users_list', function(usernames,userids,highscores) {
      t.state.userlist = usernames;
      t.state.userids = userids;
      t.setState(t.state);
    });

    this.props.socket.once('chat response client', function(username,room,color) {
        console.log("INSIDE CHAT RESPONSE");
        opponentColor = color;
        myColor = t.setColor(color);
        t.state.play = true;
        Room = room;
        t.setState(t.state);
        t.props.socket.emit('connect room',room,myColor);
        sentData = true;

    });

    this.props.socket.once('chat_request', function(room,color){
        console.log("INSIDE CHAT REQUEST!");
        opponentColor = color;
        t.state.play = true;
        Room = room;
        t.setState(t.state);
        donethisbefore =true;
    });

  }

Функция воспроизведения в LiveUsers, которая запускает запрос

playgame(username) {
    console.log("INSIDE PLAY");
    let color = colorlist[Math.floor(Math.random() * colorlist.length)];
    starter = true;
    myColor = color;
    console.log("MY COLOR:");
    console.log(myColor);
    this.props.socket.emit("chat request server",username,User,myColor);
  }