Yenileme bileşenini yenileyin

Question

Node.js sunucum her 10s'de socket.io yeni veri ile gönderir. Web uygulamamda sunucumun verileri gönderdiği ve forceUpdate()

ile güncellemeye zorladığım her zaman this.state'i güncellerim. Ancak, reaksiyon bileşenim yenilenmiyor, nedenini bilmiyorum. Ben doktor izledi ama bir şey ...

Veli cevapsız:

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; 

Çocuk:

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; 

Herkes bileşenini Tepki Gözat otomatik olarak yenilenmez biliyorum.

Answer 1

React bileşeni, durumun değiştiğini fark etmediğinden güncellenmiyor. Her seferinde farklı bir key özniteliği ile oluşturarak bir Tepki bileşenindeki bir güncelleştirmeyi zorlayabilirsiniz.

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