Question

我正在尝试创建一个小型反应组件，但是，我无法设置状态。以下是我的代码。在_onChange函数中，我尝试将长度为10的数组设置为State，并将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>
        )
    }
});

Answer 1

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

react中的setState不在react组件中工作

1 个答案: