我正在将数字值从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.log在handleCallback功能打印之前的数量,而不是它的数量num参数。我需要正确的号码以保持状态,因为我将立即将其作为道具发送给我SomeComponent。
console.log
handleCallback
num
SomeComponent
https://jsfiddle.net/69z2wepo/13000/
从文档:
setState()不会立即更改this.state,但会创建一个挂起的状态转换。调用此方法后访问this.state可能会返回现有值。无法保证对setState的调用的同步操作,并且可能会为提高性能而批量调用。
如果您要在调用后打印更改setState,请使用可选的回调参数:
setState
this.setState({ number: num }, function () { console.log(this.state.number); });