2

小さな反応コンポーネントを作成しようとしていますが、状態を設定できません。以下は私のコードです。関数では、長さ 10 の配列を State と同じ_onChangeに設定しようとしています。console.logコンソールに空の配列が表示されます。

var Home = React.createClass({

    getInitialState: function () {
        return ({
            reviewData: []
        });
    },

    componentWillMount: function() {
        ReviewStore.addChangeListener(this._onChange);
        ReviewAction.getRatings();
        console.log(this.state.reviewData);
    },

    _onChange: function() {
        var res = ReviewStore.getRating();
        console.log(res); //Here I am getting array of length 10
        this.setState({reviewData: ReviewStore.getRating()});
        console.log(this.state.reviewData); //Here I am getting array of length 0
    },

    componentWillUnmount: function () {
        ReviewStore.removeChangeListener(this._onChange);
    },

    ratingChanged : function(newRating) {
        console.log(newRating)
    },

    render: function() {
        return(
            <div>
                <h2>Rating of Arlo Smart Home 1 HD Camera</h2>
                <hr/>
                <h4>Average Rating: </h4><ReactStars half={false} onChange={this.ratingChanged} size={24}/>
            </div>
        )
    }
});

4

1 に答える 1

4

setState非同期です。値はすぐには設定されません。setState新しい状態が設定されたときに呼び出されるコールバックを渡すことができます。

反応ドキュメントからhttps://facebook.github.io/react/docs/component-api.html

setState()this.state をすぐに変更するのではなく、保留中の状態遷移を作成します。このメソッドを呼び出した後に this.state にアクセスすると、既存の値が返される可能性があります。

コードを変更できます

this.setState({reviewData: ReviewStore.getRating()}, function () {
    console.log(this.state.reviewData)
});
于 2016-08-20T05:51:23.953 に答える