即使在輸入錯誤后，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 是否仍在授權請求（加載狀態）。