setState в реакции не работает в компоненте реакции

Question

Я пытаюсь создать небольшой компонент реакции, однако я не могу установить состояние. Ниже мой код. В функции _onChange я пытаюсь установить массив длиной 10 в состояние и 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) 
});