如何处理反应导航中的身份验证流程？答案

【问题标题】：How to dealt with authentication flow in react navigation?如何处理反应导航中的身份验证流程？
【发布时间】：2021-01-20 16:56:35
【问题描述】：

两天后，我努力在我的应用中使用 firebase 实现身份验证流程。我成功地做到了。但是，我有一个微调器（基本上是 ActivityIndicator），它在登录时启动以防止多次点击。实施身份验证流程后，我不知道如何设置微调器 tp true/false。

身份验证流程之前的代码（以获得更好的想法）：

handlelogin = async () => { 
    this.setState({showSpinner: true}); 
    const {email, password} = this.state; 
    await auth .signInWithEmailAndPassword(email.trim(), password) 
    .then(() => this.props.navigation.navigate('Home')) 
    .catch((error) => this.setState({errorMessage: error.message})); this.setState({showSpinner: false}); };

身份验证流程之后：提供者：

<AuthContext.Provider value={{
 user,
 setUser,
 login: async (email, password) => {
 await auth.signInWithEmailAndPassword(email, password); },
 }}> {Screens} 
</AuthContext.Provider>

功能：

function handlelogin() { 
    setSpinner(true); 
    login(email, password).catch((error) =>setErrorMessage(error.code)); 
    setSpinner(false); }

执行此操作时出现错误：

警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 中的所有订阅和异步任务清理功能。

我尝试将 setSpinner 作为参数传递给 login，但仍然遇到同样的错误

这是触发微调器的按钮：

      {spinner == true ? (
    <ActivityIndicator size="large" color="white" />
  ) : (
    <TouchableOpacity
      style={!email.trim() || !password ? styles.disabled : styles.button}
      disabled={!password || !email.trim()}
      onPress={handlelogin}>
      <Text style={{color: '#fff', fontWeight: '500'}}>Sign in</Text>
    </TouchableOpacity>
  )}

感谢任何帮助

【问题讨论】：

标签： javascript firebase react-native firebase-authentication react-navigation

【解决方案1】：

经过 10 天的研究，我解决了这个错误在函数中，我应该在.catch 中调用setState，例如：

async function handlelogin() { 
    setSpinner(true); 
    await login(email, password).catch((error) => {
    setErrorMessage(error.code))
    }
    setSpinner(false); 
}

我希望这对面临这个问题的人有所帮助，因为这很令人沮丧。

【讨论】：