Question

我知道有很多类似的问题，但是我已经浏览了很多，但是我无法解决问题。

我有一个tic-tac-toe脚趾应用程序，这是我第一次使用它，因此我并没有真正获得该组件，子渲染部分，我认为这是我的问题，但是我不知道该如何解决。

我会生成以下实时用户列表，即使用firebase登录的用户，当其中一个单击时，我要发送发射并创建一个房间，供他们在私人房间玩井字游戏。由于某些原因，我设法修复了这个BUT，但有时会从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);
  }

Socket.io发送多个发射

0 个答案: