嗨，我正在从 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 时都会触发第二个效果。