Question

两天后，我一直在努力使用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>
  )}

感谢您的帮助

Answer 1

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

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

我希望这对遇到此问题的人有所帮助，因为它令人沮丧。

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

1 个答案: