Javascript 将值分配给组件状态时，为什么console.log会打印上一个状态？

我将数字的值从数字组件发送到主组件。在我将主组件中的值设置为该组件的状态之前，一切都正常工作

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

var Numbers=React.createClass({
handleClick：函数（编号）{
this.props.num（数字）
},
render:function（）{
返回(
1.
2.
3.
)
}
})
var Main=React.createClass({
getInitialState:函数（）{
返回{
编号：0
}
},
handleCallback:函数（num）{
log（“数字就在这里：+num”）；
这是我的国家({
编号：num
})
console.log（“但此处错误（以前的编号）：”+this.state.number）
},
render:function（）{
返回(
//
)
}
});
React.render（，document.getElementById（'container'）；

为什么会这样？第二个

console.log

在

handleCallback

函数中打印上一个数字，而不是

num

参数中的数字。我需要正确的号码才能处于我的状态，因为我将立即将其作为我的

SomeComponent

组件中的道具发送

---

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

您应该使用以下功能：

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

每次更新状态时都会触发此功能

希望它能从以下方面有所帮助：

setState（）不会立即改变this.state，但会创建 等待状态转换。调用此命令后访问this.state 方法可能返回现有值。没有 保证对setState的调用和可能发生的调用的同步操作 为提高性能而进行批处理

如果要在调用

setState

后打印更改，请使用可选的回调参数：

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

---

setState方法是异步的，因此console.log调用中还没有新的状态。您可以将回调作为第二个参数传递给setState，并在那里调用console.log。在这种情况下，值将是正确的。

在

设置状态

函数的文档中有一个有趣的注释：

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

---

以便在控制台使用中打印状态号

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

如何解决

SomeComponent

的问题？我现在明白了为什么它不起作用了，但我不知道只有在更新了this.state之后，如何才能将状态作为道具传递。我是否可以将该

}

包装为回调或其他方式？更改组件的状态或道具会强制重新渲染，除非您实现了

shouldComponentUpdate

，告诉它其他情况。因此，一旦状态在

中发生更改，它将重新渲染，并将新数字作为新道具传递给

。如果您在

中实现了

组件WillReceiveProps

，您将在收到的props中看到编号。这有意义吗？或者你想让我修改我的答案，再深入一点吗？如果你有时间/兴趣，你可以深入一点。我会非常感激的。我对

的问题是，它没有等待

的重新渲染（我相信…），因此不会从state发送正确的值。我不知道如何实现您为此显示的回调。也许这解释得更好一点：你的问题是你在提醒

中的当前道具，而不是新道具。函数

componentWillReceiveProps

可以接受一个参数

nextProps

，该参数包含接收到的所有新道具。以下是固定版本：。请记住，

this.props

在

componentWillReceiveProps

完成执行之前不会更改。