2016-08-20 94 views
2

我试图创建一个小反应组件,但是,我无法设置状态。以下是我的代码。在_onChange函数中,我试图设置一个数组长度为10的状态和console.log相同。我正在控制台中获得一个空数组。setState in react在反应组件中不起作用

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

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