reactjs – 使用React Native正确处理注销

发布时间：2020-12-15 20:13:07 所属栏目：百科来源：网络整理

导读：我有一个react本机应用程序,根据是否有经过身份验证的firebase用户显示不同的导航器. 这是我的主要App类： export default class App extends Component { state = { loggedIn: null } componentWillMount() { firebase.initializeApp({...}); firebase.auth

我有一个react本机应用程序,根据是否有经过身份验证的firebase用户显示不同的导航器.

这是我的主要App类：

export default class App extends Component {
  state = { loggedIn: null }

  componentWillMount() {
    firebase.initializeApp({...});

    firebase.auth().onAuthStateChanged(user => {
      if (user) {
        this.setState({ loggedIn: true });
      } else {
        this.setState({ loggedIn: false });
      }
    });
  }

  renderContent() {
    switch (this.state.loggedIn) {
      case true:
        return (
          <MenuContext>
            <MainNavigator />
          </MenuContext>
        );
      case false:
        return (
          <AuthNavigator />
        );
      default:
        return (
          <View style={styles.spinnerStyle}>
            <Spinner size="large" />
          </View>
        );
    }
  }

  render() {
    return (
      <Provider store={store}>
        {this.renderContent()}
      </Provider>
    );
  }
}

现在,当用户登录时,重新渲染正确的Navigator可以很好地工作.

我遇到的问题是退出.在我的MainNavigator(用户登录时显示的那个)中,我有一个注销按钮,用于将用户注销.像这样实现：

signOutUser = async () => {
    try {
        await firebase.auth().signOut();
    } catch (e) {
        console.log(e);
    }
}

render() {
    return (
        ...
        <Button title="logout" onPress={() => this.signOutUser()} />
    )
}

这可以达到预期效果,但是,我得到以下警告我要解决的问题：

Warning: Can only update a mounted or mounting component. This usually means you called setState,replaceState or forceUpdate on an unmounted component. This is a no-op.

实现此注销功能的最佳实践方法是什么？

编辑：我正在使用react-navigation库来管理我的应用程序导航.

解决方法

我认为根据应用程序组件的状态生成导航器可能很危险,并可能导致此问题.注销时,您应该重定向到负责注册或登录的组件,并且不要让负责此操作的状态重新生成另一个导航的一部分.

您可以做的是在App Component中,而不是返回MainNavigator或AuthNavigator,您可以返回两个Navigator并添加一个名为Loading的路由,例如,谁将呈现一个加载屏幕,谁将是负责路由您的应用程序的initialRoute取决于是否记录了用户.

这种情况下的StackNavigator示例

const Navigator = StackNavigator({
  Main: {
    screen: MainComponent,},Auth: {
    screen: AuthComponent,Loading: {
    screen: LoadingComponent
  },{
    initialRouteName : 'Loading'
});

在您的LoadingComponent中,您将渲染您的微调器

render() {
  return(
    <View style={styles.spinnerStyle}>
      <Spinner size="large" />
    </View>
  );
}

在LoadingComponent的componentDidMount中：

firebase.auth().onAuthStateChanged(user => {
  if (user) {
      navigate('Home');
  } else {
      navigate('Login');
  }
});

这样,当您打开应用程序时,将显示加载屏幕,然后根据用户是否记录重定向到好页面.

并在您的signOutUser重定向到登录页面

signOutUser = async () => {
    try {
        await firebase.auth().signOut();
        navigate('Auth');
    } catch (e) {
        console.log(e);
    }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!