即使在输入错误后，React Firebase 也不会返回错误消息

Question

我正在使用 React Firebase 挂钩登录我的网站。 当尝试在登录表单中使用错误的电子邮件或密码登录时，将从 React Firebase 挂钩返回错误消息。 但即使在输入错误后，错误消息也不会返回

const Login = () => {
  const [signInWithEmailAndPassword, error] =
    useSignInWithEmailAndPassword(auth);
    
  const location = useLocation();
  const navigate = useNavigate();

  const from = location?.state?.from?.pathname || '/';
  
  
   if (error) {
     return (
       <div>
         <p>Error: {error.message}</p>
       </div>
     );
   }
    const handleLogIn = (e) => {
      e.preventDefault();
      const email = e.target.email.value;
      const password = e.target.password.value;
      signInWithEmailAndPassword(email, password)
      e.target.reset();
      navigate(from, { replace: true })
      
    }

Answer 1

signInWithEmailAndPassword似乎是一个async函数，您的代码没有等待返回的 Promise 解决。 我猜你看到的是navigate("/"); 调用并且应用程序正在导航到主页。

const handleLogIn = (e) => {
  e.preventDefault();
  const email = e.target.email.value;
  const password = e.target.password.value;
  signInWithEmailAndPassword(email, password); // <-- no waiting for promise
  e.target.reset();
  navigate(from, { replace: true }); // <-- navigate away
};

使用SignInWithEmailAndPassword

 export default (auth: Auth): EmailAndPasswordActionHook => { const [error, setError] = useState<AuthError>(); const [loggedInUser, setLoggedInUser] = useState<UserCredential>(); const [loading, setLoading] = useState<boolean>(false); const signInWithEmailAndPassword = async ( email: string, password: string ) => { setLoading(true); setError(undefined); try { const user = await firebaseSignInWithEmailAndPassword( auth, email, password ); setLoggedInUser(user); } catch (err) { setError(err as AuthError); } finally { setLoading(false); } }; const resArray: EmailAndPasswordActionHook = [ signInWithEmailAndPassword, loggedInUser, loading, error, ]; return useMemo<EmailAndPasswordActionHook>(() => resArray, resArray); };

handleLogin处理程序可能应该等待 Promise 解决，以便挂钩可以返回任何错误。 事实证明，虽然signInWithEmailAndPassword也没有返回任何解析/拒绝值，因此无法从handleLogIn回调函数中知道身份验证是否成功，组件将需要使用钩子返回的loading和loggedInUser状态来确定是否导航是安全的。

例子：

const Login = () => {
  const [
    signInWithEmailAndPassword,
    loggedInUser,
    loading,
    error,
  ] = useSignInWithEmailAndPassword(auth);
    
  const location = useLocation();
  const navigate = useNavigate();

  const from = location?.state?.from?.pathname || '/';

  useEffect(() => {
    if (!loading && loggedInUser) {
      navigate(from, { replace: true });
  }, [loggedInUser, loading, navigate, from]);
    
  if (error) {
    return (
      <div>
        <p>Error: {error.message}</p>
      </div>
    );
  }

  const handleLogIn = (e) => {
    e.preventDefault();
    const email = e.target.email.value;
    const password = e.target.password.value;
    signInWithEmailAndPassword(email, password)
    e.target.reset();
  }

  ...

Answer 2

您错误地使用signInWithEmailAndPassword挂钩。 signInWithEmailAndPassword返回一个数组，第三个索引是错误消息。

你可以按照这个： https ://github.com/CSFrequency/react-firebase-hooks/blob/master/auth/README.md#usesigninwithemailandpassword

const [
  signInWithEmailAndPassword,
  user,
  loading,
  error,
] = useSignInWithEmailAndPassword(auth);

由于useSignInWithEmailAndPassword返回一个数组，我们需要从各个索引中提取/解构该值。

除此之外，您还必须使用loading来显示 firebase 是否仍在授权请求（加载状态）。