Question

我有一个代码可以做这样的事情:(伪代码）

class extends Component{
   constructor(){
       this.state={
         condition1 : false,
         condition2 : false,
         condition3 : false,
         condition4 : false,
       }
       //set all 4 condition states to true once data loading has completed from the store
   }


   render(){

      return(
        if (this.state.condition1 && this.state.condition2 && this.state.condition3 && this.state.condition4)
           Render Main component
        else
           Render loading screen

      );

}



}

基本上我有4种状态用于在加载主组件之前检查数据是否已加载。一旦Store（来自另一个文件）完成加载数据，它就会发出一个事件，导致设置4个状态为true，加载主组件。但是，一旦我从Genymotion模拟器点击重新加载按钮，4状态保持为真，并且不会重置为false，导致应用程序加载主组件并崩溃。（由于数据还没有准备好）我已经尝试在ComponentWillMount方法中再次将所有4个状态重置为false，但似乎状态在主应用程序尝试加载主要组件之前没有及时设置为false。我应该在生命周期的哪个组件中将状态重置为false？或者我应该忽略这个问题，因为它是不现实的＆＃34;在实际设备上重新加载应用程序？

Answer 1

我应该在生命周期的哪个组件中重置状态是假的吗？

文档建议在呈现之前使用componentWillReceiveProps更新状态。我已经为我的项目完成了这项工作并且效果很好，但根据您的使用情况，您可能需要检查newProps是否与this.props不同。

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

<强> componentWillReceiveProps

组件接收新道具时调用。这种方法不是   要求初始渲染。

以此为契机，对之前的道具过渡作出反应   通过使用this.setState（）更新状态来调用render（）。该   可以通过this.props访问旧道具。调用this.setState（）   在此函数中不会触发额外的渲染。

Answer 2

我设法通过减少网络抓取请求的数量来解决这个问题。似乎同时拥有多个网络请求可能会导致不稳定，即使不清楚为什么会这样。

React native：状态似乎在模拟器上重新加载后仍保留以前的状态

2 个答案: