时间戳

首页 > 解决方案 > 导航问题 - 无法对未安装的组件执行 React 状态更新

javascript - 导航问题 - 无法对未安装的组件执行 React 状态更新

问题描述

我正进入（状态

ExceptionsManager.js:94 警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 componentWillUnmount 方法中的所有订阅和异步任务。在 TabView 中（在 createMaterialTopTabNavigator.js:248 处）

仅当我尝试使用createMaterialTopNavigator. 我推测我的问题可能与我如何构建导航页面有关。我对重新配置导航的其他选项持开放态度！

我已经尝试过this.setState({signedIn:false})，this.AuthorizeFireBaseUser()在我的componentWillUnmount，但都没有成功。

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;

该类Router返回 Layout 调用函数RootNavigator来确定根据用户是否登录来显示哪些屏幕。

Main.js - 是我的createMaterialTopNavigator所在的地方，它将呈现两个主要页面。我在 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;

应用程序.js 

export default class App extends React.Component {
  render() {
    return <Router />
  }
}

我不确定如何解决这个警告，内存泄漏从来都不是好事。我对修复导航结构的所有建议持开放态度，因为我认为这可能是问题所在。

标签： javascriptreactjsreact-nativereact-navigationreact-native-ios

解决方案

setState()setState()是异步的，所以我认为你的组件在完成设置状态之前就被卸载了。

您可以使用变量来跟踪并检查组件是否仍然挂载。

isMounted = false // Initially

componentDidMount() {
    this.isMounted = true;
}

componentWillUnmount() {
    this.isMounted = false;
}

现在setState()仅在验证isMounted仍然正确后使用。

推荐阅读