Question

我将Numbers组件中的数字值发送到Main组件。一切正常，直到我将主要组件中的值设置为该组件的状态。

Collections.singletonList("All")

为什么会这样？ 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组件中的道具发送。

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

Answer 1

来自docs：

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

如果要在调用str_replace($field_value, "http://www.mywebsite.com/img/", "");后打印更改，请使用可选的回调参数：

setState

Answer 2

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

您应该使用以下功能：

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

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

希望有所帮助

Answer 3

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

Answer 4

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

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

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

Answer 5

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

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

将值分配给组件状态时，为什么console.log会打印以前的状态？

5 个答案: