如何使用 React 和 SocketIO 在不刷新页面的情况下实时显示值？

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

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

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 访问。

您还可以使用 map 完全删除您的 showPlayers 函数：

const { players } = this.state
const { card } = this.props.classes

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>
            {players.map(player =>
                <Card className={card} key={player}>
                    <CardHeader
                        avatar={
                            <Avatar style={{ backgroundColor: "#00FF00" }} aria-label="Recipe">
                                R
                            </Avatar>
                        }
                        action={
                            <IconButton>
                                <MoreVertIcon />
                            </IconButton>
                        }
                        title={player}
                        subheader=""
                    />
                </Card>
            )}
            <form onSubmit={this.handleFormSubmit}>
                <br></br>
                <Button bsStyle="primary" type="submit" bsSize="large" block>
                    Lancer la partie
                </Button>
            </form>
        </div>
        <ToastContainer store={ToastStore} />
    </div>
)