当新用户登录时，如何确保我的菜单刷新？ 尝试显示正确的项目（管理员用户的管理员导航）

Question

My SideMenu.js basically does a check to see if user is admin or not before building the proper routes to render, my issue is that when i sign out and sign back in, it keeps the same menu from the previous user.

It looks something like this:

class SideMenu extends Component {
constructor () {
super();

this.state = {
  isAdmin: false,
  isLoading: true,
  footer: [
    { label: 'Settings', url: 'settingsUrl', icon: settingsIcon, id: '1' },
    { label: 'Log Out', url: 'logOutUrl', icon: signoutIcon, id: '2' },
  ]
}

this.checkVerification();
}

checkVerification = () => {
var isLoggedIn = Firebase.isLoggedIn();
var isAdmin = Firebase.isAdmin();

Promise.all([ isLoggedIn, isAdmin ]).then((responses) => {
  isLoggedIn = responses[0];
  isAdmin = responses[1];

  if(isLoggedIn){
    if(isAdmin){
      this.setState({
        isAdmin: true,
        isLoading: false,
        routes: [
          { label: 'Screen1', url: 'screenUrl1', icon: screenIcon1, id: '1' },
          { label: 'Screen2', url: 'screenUrl2', icon: screenIcon2,  id: '2' },
          { label: 'AdminScreen3', url: 'screenUrl3', icon: screenIcon3, id: '3' },
        ]
      })
    }else{
      this.setState({
        isLoading: false,
        routes: [
          { label: 'Screen1', url: 'screenUrl1', icon: screenIcon1, id: '1' },
          { label: 'Screen2', url: 'screenUrl2', icon: screenIcon2,  id: '2' },
        ]
      })
    }
  }else{
    this.props.navigation.navigate('Login')
  }
})
}

Then I render the menu at the end:

render () {
const {  isLoading } = this.state;

return(
  <View style={styles.container}>
    {isLoading && this.renderLoading()}
    {!isLoading && this.renderMenu()}
  </View>
)
}

The Menu only loads once and never refreshes when a user signs out and back in with a different account. I tried a bunch of checks in the sidemenu render but it resulted in functions being spammed and didnt work either way. Then I found a post of someone mentioning to use StackActions.reset, which I did in my Login Screen, which works, the code is as follows:

  const resetAction = StackActions.reset({
          index: 0,
          actions: [NavigationActions.navigate({ routeName: 'Init' })],
      });
  this.props.navigation.dispatch(resetAction);

This works, but I get the warning:

'Warning: Can\'t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in %s.%s', 'the componentWillUnmount method', '\n in Login (at SceneView.js:9)

What's the proper way to go about refreshing my menu on new user? I've been trying to fix it for quite a while with no proper result. I'm not sure if it helps to know that I load my SideMenu from my Init Page:

import { AppRegistry, Dimensions, YellowBox } from 'react-native';
import { createDrawerNavigator , createAppContainer } from 'react-navigation';
import SideMenu from './pages/menu/SideMenu'
import Routes from './Routes';

const DrawerNav = createDrawerNavigator({
  Screen: {
      screen: Routes,
    }
  }, {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width/1.7,
    overlayColor: 'rgba(0, 0, 0, 0.7)',
    minSwipeDistance: 5,
});

const Init = createAppContainer(DrawerNav);

export default Init;

Any help would be greatly appreciated, thank you in advance.

Answer 1

I figured it out. First of all I had a bunch of promises that weren't getting resolved when signing out that were giving me errors, after resolving them properly, I ended up changing my logOut.js to:

  componentDidMount(){
    Firebase.logOut().then((response) => {
      const resetAction = StackActions.reset({
              index: 0,
              actions: [NavigationActions.navigate({ routeName: 'Login' })],
          });
      this.props.navigation.dispatch(resetAction);
    })
  }

That did the trick for me, when I tried that in my SideMenu.js when route == 'LogOut' it gave me warnings. It seems to be working this way though. Hope this helps someone struggling with the same issue out if they come across this.