javascript - 刷新 react 组件

Question

我的node.js服务器每10秒发送一次socket.io新数据。在我的网络应用程序中，每次我的服务器发送数据时我都会更新 this.state 并强制使用 forceUpdate() 进行更新

但是，我的 react 组件没有刷新，我不知道为什么。我遵循了文档，但我错过了一些东西......

父级:

class DataAnalytics extends React.Component {
  constructor(props) {
    super(props);
    socket = this.props.socket;
    this.state = {data: []};

    socket.on('dataCharts', (res) => {
      console.log("new data charts : "+res);
      var data = JSON.parse(res);   
      this.setState({data: data});
      this.forceUpdate();
    });
  }

  componentWillUnmount() {
    socket.off('dataCharts');
  }

  render() {
    return (
    <div id="dataAnalytics">
      <Stats data={this.state.data}></Stats>
    </div>
    );
  }
}

export default DataAnalytics;

child :

class Stats extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="stats" style={{textAlign:'center'}}>
        <h4>Number: </h4>
      </div>
    );
  }

  componentDidUpdate() {
    var data = this.props.data;

    if(!jQuery.isEmptyObject(data)) {
      $( ".stats" ).html("<h4>Number : data['nb']['counterIn']</h4>");
    }
  }
}

export default Stats;

任何人都知道如何自动刷新我的 React 组件。

Answer 1

React 组件不会更新，因为它没有意识到自己的状态发生了变化。您可以通过每次使用不同的 key 属性创建 React 组件来强制更新它。

render() {
     return (
         <div id="dataAnalytics">
             <Stats key={this.uniqueId()} data={this.state.data}></Stats>
         </div>
    );
}

// Example of a function that generates a unique ID each time
uniqueId: function () {
    return new Date().getTime();
}