嗨，我正在从 firestore 检索数据，并检查是将用户定向到索引页面还是输入新用户的详细信息，但无法这样做

Question

React 代码

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();
}, []);

检查电子邮件是否存在

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. 但即便如此，设置状态也是一个异步操作，因此帐户列表不会在getAccounts完成后立即更新 - 即使您在调用它时使用await也是如此。

---

如果你不使用accountList来渲染UI，你可能应该完全摆脱它作为一个useState钩子，只使用常规的JavaScript变量来传递值。

但是，即使您在 UI 中使用它，也需要使用不同的逻辑来检查其结果。例如，您可以在getAccounts函数中运行额外的检查，并让它们使用与常规变量相同的结果：

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状态变量的第二个效果来执行检查和重定向：

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