Question

我有一个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>
    );
  }
}

现在，当用户登录时重新渲染正确的导航器，这非常适用。

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

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

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

这可以达到预期目的，但是，我得到以下警告我想解决：

警告：只能更新已安装或安装的组件。这通常意味着您在已卸载的组件上调用了setState，replaceState或forceUpdate。这是一个无操作。

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

修改：我正在使用react-navigation库来管理我的应用程序导航。

使用React Native正确处理注销

0 个答案: