小编典典

将值分配给组件状态后,为什么console.log会打印以前的状态?

reactjs

我正在将数字值从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'));

为什么会这样?其次console.loghandleCallback功能打印之前的数量,而不是它的数量num参数。我需要正确的号码以保持状态,因为我将立即将其作为道具发送给我SomeComponent

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


阅读 272

收藏
2020-07-22

共1个答案

小编典典

文档

setState()不会立即更改this.state,但会创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用的同步操作,并且可能会为提高性能而批量调用。

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

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