Question

我使用NodeJS，React和SocketIO开发了一个基本应用程序。

我的NodeJS服务器将套接字和播放器表（字符串值）发送到React客户端。我想在反应视图中显示此球员表，并在其变化时动态刷新。

我尝试了一些解决方案，但是效果不佳。您是否有想法这样做或改进我的代码？

谢谢

构造函数：this.players []

constructor(props){
    super(props);
    this.state = {
        endpoint: "http://127.0.0.1:8080",
    }

    this.gameId = this.props.match.params.id;
    this.players = [];

}

showPlayer：显示带有卡片的玩家列表

    showPlayers = () => {
     const  classes  = this.props;
    let playersCards = [];
    console.log(this.players);

this.players.foreach(function(p){

      playersCards.push(
        <Card className={classes.card}>
           <CardHeader
             avatar={
               <Avatar style={{backgroundColor: "#00FF00"}} aria-label="Recipe">
                 R
               </Avatar>
             }
             action={
               <IconButton>
                 <MoreVertIcon />
               </IconButton>
             }
             title={p}
             subheader=""
           />
       </Card>
      )
    }

    return playersCards;
}

Socket.io：更新玩家列表

  socket.on('ack-join-game', function(res){
      this.players =  res.dataGame.players;
  });

渲染：

   const  classes  = this.props;
    return(
      <div className="GameConfig">
        <h1>Salon de jeu</h1>
        <div className="well" style={this.wellStyles}>
                  <h2>Informations</h2>
                  Id : {this.gameId}
                  <br></br>
                  <h2>Players (0/2)</h2>
                  <div id="cards">
                  </div>
                  {this.showPlayers()}
                  <form onSubmit={this.handleFormSubmit}>
                <br></br>
              <Button bsStyle="primary" type="submit" bsSize="large" block>
              Lancer la partie
            </Button>

          </form>
        </div>
        <ToastContainer store={ToastStore}/>
      </div>
    )
}

Answer 1

您应该将播放器存储在组件状态中，因为更改播放器会影响要渲染的内容。另外，如果端点永远不会在运行时更改，则可以将其删除：

some html
{{ question.question_image.url }}
some html

然后调用constructor(props){ super(props); this.state = { players = [], } this.gameId = this.props.match.params.id; this.endpoint = "http://127.0.0.1:8080"; }来更新播放器并刷新套接字事件中的组件：

setState

现在，您需要通过socket.on('ack-join-game', res => { this.setState({ players: res.dataGame.players }) });而不是this.state.players访问您的播放器。

您还可以使用this.players完全删除showPlayers函数：

map

如何使用React和SocketIO实时显示价值而无需刷新页面？

1 个答案: