[英]Navigation issue - can't perform a React state update on unmounted component
I am getting我正进入(状态
ExceptionsManager.js:94 Warning: Can't perform a React state update on an unmounted component.
ExceptionsManager.js:94 警告:无法对卸载的组件执行 React 状态更新。 This is a no-op, but it indicates a memory leak in your application.
这是一个空操作,但它表明您的应用程序中存在内存泄漏。 To fix, cancel all subscriptions and asynchronous tasks in the componentWillUnmount method.
要修复,请取消 componentWillUnmount 方法中的所有订阅和异步任务。 in TabView (at createMaterialTopTabNavigator.js:248)
在 TabView 中(在 createMaterialTopTabNavigator.js:248)
It only happens when I am trying to render a screen with createMaterialTopNavigator
.它仅在我尝试使用
createMaterialTopNavigator
渲染屏幕时发生。 I am speculating that my issue maybe with how I have constructed my navigation page.我推测我的问题可能与我如何构建导航页面有关。 I am open to other options in reconfiguring my navigation!
我对重新配置导航的其他选项持开放态度!
I've tried this.setState({signedIn:false})
, this.AuthorizeFireBaseUser()
in my componentWillUnmount
, but all have been unsuccessful.我已经在我的
componentWillUnmount
尝试过this.setState({signedIn:false})
, this.AuthorizeFireBaseUser()
,但都没有成功。
Router.js (where all my navigation/screens take place) Router.js (我所有的导航/屏幕发生的地方)
const SignedOut = createStackNavigator({
SignIn:{screen:SignIn},
CreateAccount:{screen:CreateAccount},
Profile:{screen:Profile}
});
const SignedIn = createMaterialBottomTabNavigator({
Home:{screen:Main}, //where my top tab navigator lives
Profile:{screen:Profile}
});
class Router extends React.Component{
constructor(){
super();
this.state={
signedIn:false,
}
}
RootNavigator = (signedIn)=>{
return createSwitchNavigator({
SignedIn:{screen:SignedIn},
SignedOut:{screen:SignedOut}
},
{
initialRouteName: this.state.signedIn ? "SignedIn" : "SignedOut" //if signedIn is true head to signedIn else head to SignOut screens
});
}
AuthorizeFirebaseUser(){
firebase.auth().onAuthStateChanged(user=>{
if(user){
this.setState({signedIn:true});
}
});
}
componentDidMount(){ //Checking if user is signed in will run in background upon loading
this.AuthorizeFirebaseUser(); //if user is signed in set state to true
}
componentWillUnmount(){
// unsure what to unmount
}
render(){
const {signedIn} = this.state;
const Layout = createAppContainer(this.RootNavigator(signedIn)); // when this page renders it'll call the rootnav function - check state , and render the appropriate screens
return <Layout />
}
}//end bracket
export default Router;
The class Router
returns Layout that calls function RootNavigator
to determine which screens to show depending if user is logged in.类
Router
返回调用函数RootNavigator
以确定要显示的屏幕,具体取决于用户是否登录。
Main.js - is where my createMaterialTopNavigator lives and will render two main pages. Main.js - 是我的createMaterialTopNavigator所在的位置,它将呈现两个主要页面。 I call Main.js in const = SignedIn → in Home screen
我在主屏幕的 const = SignedIn → 中调用Main.js
const Tabs = createMaterialTopTabNavigator({
Newsfeed:{screen: Newsfeed},
Services:{screen:Services}
},
{
initialRouteName:'Services',
swipeEnabled:true,
navigationOptions:({navigation})=>({
header:null
}),
tabBarOptions:{
activeTintColor:'#65FAE9',
inactiveTintColor:'white',
allowFontScaling:true,
indicatorStyle:{borderBottomColor:'#65FAE9', borderBottomWidth:4,},
style:{backgroundColor:'#515276'},
labelStyle:{marginTop:'40%',fontSize:15},
},
},
);
export default Tabs;
App.js应用程序.js
export default class App extends React.Component {
render() {
return <Router />
}
}
I'm unsure how to fix this warning, memory leaks are never good.我不确定如何解决这个警告,内存泄漏从来都不是好事。 I am open to all suggestions in fixing my navigation structure, as I believe that may be the issue.
我对修复导航结构的所有建议持开放态度,因为我认为这可能是问题所在。
setState()
is asynchronous, so I think your component is getting unmounted before setState()
finishes setting the state. setState()
是异步的,所以我认为你的组件在setState()
完成状态设置之前就被卸载了。
You can use a variable to keep track and check whether the component is still mounted or not.您可以使用变量来跟踪并检查组件是否仍然安装。
isMounted = false // Initially
componentDidMount() {
this.isMounted = true;
}
componentWillUnmount() {
this.isMounted = false;
}
Now use setState()
only after verifying that isMounted
is still true.现在仅在验证
isMounted
仍然为真后才使用setState()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.