反应更新状态如何？

我遇到了一个很奇怪的问题，我不知道如何解决。反应更新状态如何？

我有一个非常简单的方法：当按下一个按钮叫toggleInverted()

toggleInverted() { 
    if(this.state.inverted){ 
    this.setState({inverted: false}); 
    } else{ 
    console.log("got to else..."); 
    this.setState({inverted: true}); 
    console.log(this.state.inverted); 
    } 
}

倒场是在构造函数初始化为false。但是，当我加载页面时，第一次单击按钮时，它不会正确地重置状态。输出是： got to else... false。

所以不知它是进入这个else语句，执行setState，并且尚未设置反转是真实的......

有什么关于setState，我很想念？

来源

2017-02-18 Tevon Strand-Brown

setState不会立即更改您的组件状态。您的状态更改可能是异步的，因此不能保证您的console.log语句将打印已更改的状态。但是总是会导致render方法被调用，所以如果您在您的组件的render方法内控制台登录状态，则您的状态应该为true。

另外，this.setState({inverted: !this.state.inverted})是您的代码的更短版本snippit

来源

2017-02-18 02:03:12 kswc

谢谢！我会按照你的建议缩短它的长度。我用longform来100％确定它不是那种让它搞砸的逻辑。 –

setStatemay be asynchronous

这意味着你不能指望的this.state值改变setState被称为后。

引述docs：

的setState（）不会立即发生变异this.state而是创建一个挂起状态转变。调用此方法后访问this.state有可能返回现有值...

顺便说一句，你可以使用目前的反转值阴性表达如下图你的代码：

toggleInverted() { 
    this.setState({inverted: !this.state.inverted}); 
}

来源

2017-02-18 02:02:27 Pineda

反应更新状态如何？

回答

相关问题