React組件道具不更新

Question

你好我創建一個簡單的React組件，只需要一個標籤，當一個SignalR方法被觸發時它會改變它的內容。我的反應組件是這樣的：

var PersonalityStatusApp = React.createClass({ 

getInitialState: function() { 
    return { data: dataInit }; 
}, 

componentWillMount(){ 
    var self = this; 
    this.setState({ data:this.props.status}); 
     Votinghub.on("UpdateStatusLabel", function (data) { 
     var obj = $.parseJSON(data); 
     self.setState({ data: obj }); 
    }); 
}, 

render: function() { 
    return (
     <div className="PersonalityStatusApp"> 
      <label>{this.props.status}</label> 
     </div> 
    ); 
} 

}）;

當te組件接收到UpdateStatusLabel signalR消息時，它使用從signalR消息獲取的值更改組件的狀態。

UpdateStatusLabel方法獲取正確的值。

這觸發渲染方法，但是當我在渲染方法我看到thnat值檢查性能仍從初始狀態的人。

有人可以幫我嗎？

Answer 1

原因是，您正在更新狀態變量並打印props值。最初state可變數據將具有this.props的值，並且在得到signalR後，您正在更新statedata: obj，因此打印值爲this.stat.data.status它將打印更新的值。

使用本：

return (
    <div className="PersonalityStatusApp"> 
     <label>{this.state.data.status}</label> 
    </div> 
); 

注：首先，您需要設置的值data: this.props

全部分：

var PersonalityStatusApp = React.createClass({ 

    getInitialState: function() { 
     return { data: dataInit }; 
    }, 

    componentWillMount(){ 
     var self = this; 
     this.setState({ data: this.props});     //changed this 
     Votinghub.on("UpdateStatusLabel", function (data) { 
      var obj = $.parseJSON(data); 
      self.setState({ data: obj }); 
     }); 
    }, 

    render: function() { 
     return (
      <div className="PersonalityStatusApp"> 
       <label>{this.state.data.status}</label> 
      </div> 
     ); 
    } 
});