反应中的setState在反应组件中不起作用

Question

我正在尝试创建一个小的react组件，但是无法设置状态。 下面是我的代码。 在_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)
});