当值被分配给组件状态时，为什么console.log打印之前的状态

When value is assigned to components state, why console.log prints the previous state?

本文关键字：状态 log console 打印 为什么 分配 组件      更新时间：2023-09-26

我正在从数字组件发送数字值到主组件。在我把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参数中的数字。我需要正确的数字在我的状态，因为我要立即发送它作为一个道具在我的SomeComponent组件。

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

From the docs:

setState()不会立即改变它。状态，但会创建待定状态转换。访问。调用后的状态方法可能返回现有值。没有保证调用setState和调用may的同步操作批量处理以提高性能。

如果您想在调用setState之后打印更改，请使用可选的回调参数:

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

setState方法是异步的，所以在console.log调用中还没有出现新的状态。您可以将回调作为第二个参数传递给setState，并在那里调用console.log。在本例中，该值将是正确的

可能是因为console.log在真正设置新状态之前被触发。

你应该使用这个函数:

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

每次状态更新时触发此函数。

希望有所帮助

在setState函数的文档中有一个有趣的注释:

setState()不会立即改变它。状态，但会创建挂起的状态转换。访问。状态调用此方法后可能返回现有值。

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

要在控制台中打印状态号，请使用

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])

相关文章：