Обновить компонент реагирования

Question

Мой сервер node.js отправляет с socket.io новые данные каждые 10 секунд. В моем веб-приложении я обновляю this.state каждый раз, когда мой сервер отправляет данные и принудительно обновляется с помощью forceUpdate()

Однако мой компонент реагирования не обновляется, я не знаю почему. Я последовал за документ, но я что-то пропустил ...

Родитель:

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; 

ребенка:

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; 

Каждый знает, как обновить автоматически моей Реагировать компонент.

Answer 1

Компонент React не обновляется, потому что он не понимает, что это состояние изменяется. Вы можете принудительно обновить компонент React, создавая его каждый раз с помощью другого атрибута key.

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(); 
}