反応コンポーネントをリフレッシュする

Question

私のnode.jsサーバーはsocket.ioで新しいデータを10秒ごとに送信します。私のWebアプリケーションでは、私のサーバがデータを送信しforceUpdate（）で更新するたびにthis.stateを更新します。

しかし、私の反応コンポーネントはリフレッシュされません。私は、docに続くが、私は何か...

親逃した：

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コンポーネントの更新は、毎回別のkey属性を使用して強制的に行うことができます。

`this.setState（）`私は私の親コンポーネントでthis.setStateを（）しています