Когда значение присваивается состоянию компонентов, почему console.log печатает предыдущее состояние?

Question

Я отправляю значения чисел из компонента «Числа» в «Основной компонент». Все работает нормально, пока я не установил это значение в моем основном компоненте в состояние этого компонента.

var Numbers = React.createClass({ 
    handleClick: function(number){ 
     this.props.num(number) 
    }, 
    render: function(){ 
     return (
      <div> 
       <button onClick={this.handleClick.bind(null, 1)}>1</button> 
       <button onClick={this.handleClick.bind(null, 2)}>2</button> 
       <button onClick={this.handleClick.bind(null, 3)}>3</button> 
      </div> 
     ) 
    } 
}) 

var Main = React.createClass({ 
    getInitialState: function(){ 
     return { 
      number: 0 
     } 
    }, 
    handleCallback: function(num){ 
     console.log("number is right here: " + num); 
     this.setState({ 
      number: num 
     }) 
     console.log("but wrong here (previous number): " + this.state.number) 
    }, 
    render: function() { 
     return (
      <Numbers num={this.handleCallback} /> 
      //<SomeComponent number={this.state.number} /> 
     ) 
    } 
}); 

React.render(<Main />, document.getElementById('container')); 

Почему это так? Второй console.log в handleCallback функция печатает предыдущее число, а не номер, который находится в num параметр. Мне нужно, чтобы номер был в моем состоянии, потому что я отправлю его немедленно в качестве реквизита в моем SomeComponent компоненте.

https://jsfiddle.net/69z2wepo/13000/

Answer 1

От docs:

SetState() не сразу мутировать this.state но создает состояние отложенного перехода. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение. Существует нет гарантия синхронной работы вызовов на setState, и вызовы могут быть отправлены на для повышения производительности.

Если вы хотите напечатать изменения после вызова setState, используйте дополнительный параметр обратного вызова:

this.setState({ 
    number: num 
}, function() { 
    console.log(this.state.number); 
}); 

Answer 2

Вероятно потому, что console.log срабатывает до того, как новое состояние было действительно установлено.

Вы должны функция:

ComponentDidUpdate: function() { 
    console.log(this.state.number); 
} 

Эта функция вызывается каждый раз, когда состояние обновляется. Надеюсь, что это помогает

Answer 3

Метод SetState асинхронный, так что новое государство пока не существует на console.log вызов. Вы можете передать обратный вызов в качестве второго параметра для setState и вызвать console.log. В этом случае значение будет правильным.

Answer 4

В документации функции setState интересное примечание:

SetState() не сразу мутировать this.state но создает отложенный переход состояния. Доступ к this.state после вызова этого метода может потенциально вернуть существующее значение.

https://facebook.github.io/react/docs/component-api.html

Answer 5

Для печати госномер в использовании консоли

this.setState({ 
     number: num 
    },function(){console.log("but wrong here (previous number): " + this.state.number)}) 

вместо

this.setState({ 
     number: num 
    }) 
    console.log("but wrong here (previous number): " + this.state.number) 

Вкратце: используйте