React native 本机反应，初始化变量会导致无限循环，这是为什么

考虑下面的程序，当它以当前形式运行时，它不会在屏幕上显示“here”，但是如果第四行被注释掉，它会显示。我的理解是setState是异步的，但是我可以想象，当var最终设置为true时，while循环将结束

清楚地说，这就是我如何理解正在发生的事情：
创建组件后，立即调用

componentDidMount

，然后调用

this.setState（{var:true}）

。这是异步完成的，因此程序分为两个“路径”，第一个继续到while循环，在那里它被卡住，第二个将var从false更改为true。一旦var从false更改为true，第一条路径应中断while循环，第二条路径应结束，因为异步调用已完成。然而，这并不是发生的事情，这让我感到困惑

export default class Test extends Component {
    constructor(props){
        super(props)
        this.state = {var: false}; // consider removing this line
    }

    componentDidMount(){
        this.setState({var: true})
        while (this.state.var == false){}
    }

    render(){
        return(<View style={{padding: 30}}><Text>Here</Text></View>)
    }
}

导出默认类测试扩展组件{
建造师（道具）{
超级（道具）
此状态= {var：false }；/ /考虑删除此行
}
componentDidMount（）{
this.setState（{var:true}）
而（this.state.var==false）{}
}
render（）{
返回（此处）
}
}

---

感谢您的帮助

componentDidMount

是在调用

构造函数

之后调用的初始

呈现

调用之后调用的

研究这个

---

在您的示例中，构造函数设置初始状态（

var:false

），因此当最后调用

componentDidMount

时，this.state.var==false计算结果为

false==false

=>

true

，从而产生一个无限循环。这个无限循环防止React实际设置新状态，因为

setState

是一个异步函数。当您注释掉第四行时，

this.state.var

实际上是

未定义的

，因此

未定义==false

=>

false

，没有循环。这很令人困惑，因为它是100%反转的。

调用setState回调时工作正常吗？我不确定while循环阻塞是什么意思。状态永远没有机会更新自身。如果您已经找到了解决方案，请发布答案，或者如果任何给定的解决方案都有效，请接受它。但是为什么不

this.setState（{var:true}）

首先将var更改为true？因为

setState

是一个异步函数，因此，您不能依赖于在包含

setState

调用的行之后立即设置的任何状态值，因为React控制实际设置的时间。但是，您可以在设置状态后使用

setState

回调来使用保证值

this.setState（{var:true}，（）=>console.log（this.state.var））将显示更新的状态值。阅读lifecycle函数。我编辑了我的答案，以反映React的
setState
lifecycle函数的异步性质，从而明确说明代码片段无法工作的原因。