當給組件狀態賦值時，為什么console.log 會打印之前的狀態？

Question

我正在將數字值從 Numbers 組件發送到 Main 組件。 一切正常，直到我在我的 Main 組件中將該值設置為該組件的狀態。

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

為什么會這樣？ handleCallback函數中的第二個console.log打印前一個數字，而不是num參數中的num 。 我需要正確的數字才能處於我的狀態，因為我將立即將它作為我的SomeComponent組件中的道具發送。

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

Answer 1

從文檔：

setState() 不會立即改變 this.state 而是創建一個掛起的狀態轉換。 調用此方法后訪問 this.state 可能會返回現有值。 無法保證對 setState 調用的同步操作，並且可能會批量調用以提高性能。

如果要在調用setState后打印更改，請使用可選的回調參數：

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

Answer 2

setState 方法是異步的，因此在 console.log 調用中還沒有新狀態。 您可以將回調作為第二個參數傳遞給 setState 並在那里調用 console.log。 在這種情況下，該值將是正確的。

Answer 3

可能是因為在真正設置新狀態之前觸發了 console.log。

您應該使用該功能：

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

每次狀態更新時都會觸發此函數。

希望能幫助到你

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)

簡而言之：使用setState(function|object nextState[, function callback])