javascript 当给组件状态赋值时，为什么console.log 会打印之前的状态？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31702861/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
When value is assigned to components state, why console.log prints the previous state?
提问by StrangeManInMask
I'm sending values of numbers from Numbers component to Main component. Everything is working fine until I set that value in my Main component to that component's state.
我正在将数字值从 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'));
Why is it behaving like this? Second console.login handleCallbackfunction prints the previous number, not the number which is in numparameter. I need right number to be in my state, because I'm going to send it immediately as an props in my SomeComponentcomponent.
为什么会这样？其次console.log在handleCallback功能打印之前的数量，而不是它的数量num参数。我需要正确的数字才能处于我的状态，因为我将立即将其作为SomeComponent组件中的道具发送。
回答by Michael Parker
From the docs:
从文档：
setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value. There is no guarantee of synchronous operation of calls to setState and calls may be batched for performance gains.
setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。无法保证对 setState 调用的同步操作，并且可能会批量调用以提高性能。
If you want to print the change after a call to setState, use the optional callback parameter:
如果要在调用 后打印更改setState，请使用可选的回调参数：
this.setState({
number: num
}, function () {
console.log(this.state.number);
});
回答by const314
The setState method is asynchronous, so the new state is not there yet on console.log call. You can pass a callback as a second parameter to setState and call console.log there. In this case the value will be correct.
setState 方法是异步的，因此在 console.log 调用中还没有新状态。您可以将回调作为第二个参数传递给 setState 并在那里调用 console.log。在这种情况下，该值将是正确的。
回答by Fran?ois Richard
Probably because the console.log is triggered before the new state has been really set.
可能是因为在真正设置新状态之前触发了 console.log。
You should use the function:
您应该使用该功能：
componentDidUpdate: function() {
console.log(this.state.number);
}
This function is triggered each time the state is updated.
每次状态更新时都会触发此函数。
Hope it helps
希望能帮助到你
回答by Wikunia
In the docs of the setStatefunction is an interesting note:
在setState函数的文档中有一个有趣的注释：
setState() does not immediately mutate this.state but creates a pending state transition. Accessing this.state after calling this method can potentially return the existing value.
setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。
回答by bpavlov
In order to print state number in console use
为了在控制台使用打印状态号
this.setState({
number: num
},function(){console.log("but wrong here (previous number): " + this.state.number)})
instead of
代替
this.setState({
number: num
})
console.log("but wrong here (previous number): " + this.state.number)
In short: use setState(function|object nextState[, function callback])
简而言之：使用 setState(function|object nextState[, function callback])
