嗨，我正在從 firestore 檢索數據，並檢查是否將用戶定向到索引頁面或輸入新用戶的詳細信息但無法這樣做

Question

反應代碼

    import React, { useEffect, useState } from "react";
    import { getDocs, collection } from "firebase/firestore";
    import { auth, db } from "../firebase-config";
    import { useNavigate } from "react-router-dom";
    
    function Load() {
      const navigate = useNavigate();
    
      const [accountList, setAccountList] = useState([]);
      const [hasEmail, setHasEmail] = useState(false);
      const accountRef = collection(db, "accounts");

我正確使用 useEffect 嗎？

      useEffect(() => {
        const getAccounts = async () => {
          const data = await getDocs(accountRef);
          setAccountList(
            data.docs.map((doc) => ({
              ...doc.data(),
              id: doc.id,
            }))
          );
        };
        getAccounts();
        emailCheck();
        direct();
      }, []);

檢查 email 是否存在

      const emailCheck = () => {
        if (accountList.filter((e) => e.email === auth.currentUser.email)) {
          setHasEmail(true);
        } else {
          setHasEmail(false);
        }
      };

根據當前用戶重定向

      const direct = () => {
        if (hasEmail) {
          navigate("/index");
        } else {
          navigate("/enterdetails");
        }
      };
      return <div></div>;
    }

代碼編譯但沒有正確重定向到任何頁面。 我應該做出哪些改變？ 如果格式錯誤，請原諒我發布的第一個問題。

Answer 1

這里有兩個問題：

useEffect(() => {
  const getAccounts = async () => {
    const data = await getDocs(accountRef);
    setAccountList(
      data.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id,
      }))
    );
  };
  getAccounts();
  emailCheck();
  direct();
}, []);

為了：

1. 由於getAccounts是異步的，調用的時候需要使用await 。
2. 但即便如此， 設置 state 也是一個異步操作，因此在getAccounts完成后不會立即更新帳戶列表 - 即使您在調用它時使用await也是如此。

---

如果您不使用accountList來呈現 UI，您可能應該完全擺脫它作為useState鈎子，而只需使用常規 JavaScript 變量來傳遞值。

但即使你在 UI 中使用它，你也需要使用不同的邏輯來檢查它的結果。 例如，您可以在getAccounts function 中運行額外檢查，並讓它們使用與常規變量相同的結果：

useEffect(() => {
  const getAccounts = async () => {
    const data = await getDocs(accountRef);
    const result = data.docs.map((doc) => ({
      ...doc.data(),
      id: doc.id,
    }));
    setAccountList(result);
    emailCheck(result);
    direct();
  };
  getAccounts();
}, []);

const emailCheck = (accounts) => {
  setHasEmail(accounts.some((e) => e.email === auth.currentUser.email));
};

---

或者，您可以使用依賴於accountList state 變量的第二個效果來執行檢查和重定向：

useEffect(() => {
  const getAccounts = async () => {
    const data = await getDocs(accountRef);
    setAccountList(
      data.docs.map((doc) => ({
        ...doc.data(),
        id: doc.id,
      }))
    );
  };
  getAccounts();
});
useEffect(() => {
  emailCheck();
  direct();
}, [accountList]);

現在每次更新accountList中的 accountList 時都會觸發第二個效果。