反应组件道具不更新答案

【问题标题】：React component props not updating反应组件道具不更新
【发布时间】：2017-06-01 15:38:24
【问题描述】：

您好，我正在创建一个简单的 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>
    );
}

});

当组件接收到 UpdateStatusLabel signalR 消息时，它会使用从 signalR 消息中获取的值更改组件的状态。

UpdateStatusLabel 方法得到正确的值。

这会触发渲染方法，但是当我检查渲染方法中的属性时，我发现这些值仍然是初始状态的值。

有人可以帮帮我吗？

【问题讨论】：

标签： reactjs

【解决方案1】：

原因是，您正在更新状态变量并打印props 值。最初state 变量数据将具有this.props 的值，在您获得signalR 后，您将通过data: obj 更新state，因此打印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>
        );
    }
});

【讨论】：