[英]Hi, i'm retrieving data from firestore, and checking whether to direct the user to index page or to enter details for a new user But not able to do so
React code反应代码
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");
Am i using useEffect correctly?我正确使用 useEffect 吗?
useEffect(() => {
const getAccounts = async () => {
const data = await getDocs(accountRef);
setAccountList(
data.docs.map((doc) => ({
...doc.data(),
id: doc.id,
}))
);
};
getAccounts();
emailCheck();
direct();
}, []);
checking whether email exists检查 email 是否存在
const emailCheck = () => {
if (accountList.filter((e) => e.email === auth.currentUser.email)) {
setHasEmail(true);
} else {
setHasEmail(false);
}
};
Redirecting based on current user根据当前用户重定向
const direct = () => {
if (hasEmail) {
navigate("/index");
} else {
navigate("/enterdetails");
}
};
return <div></div>;
}
The code compiles but doesn't redirect properly to any of the pages.代码编译但没有正确重定向到任何页面。 What changes should I make?我应该做出哪些改变? First question posted excuse me if format is wrong.如果格式错误,请原谅我发布的第一个问题。
There are two problems here:这里有两个问题:
useEffect(() => {
const getAccounts = async () => {
const data = await getDocs(accountRef);
setAccountList(
data.docs.map((doc) => ({
...doc.data(),
id: doc.id,
}))
);
};
getAccounts();
emailCheck();
direct();
}, []);
In order:为了:
getAccounts
is asynchronous, you need to use await
when calling it.由于getAccounts
是异步的,调用的时候需要使用await
。getAccounts
completes - even when you use await
when calling it.但即便如此, 设置 state 也是一个异步操作,因此在getAccounts
完成后不会立即更新帐户列表 - 即使您在调用它时使用await
也是如此。 If you don't use the accountList
for rendering UI, you should probably get rid of it as a useState
hook altogether, and just use regular JavaScript variables to pass the value around.如果您不使用accountList
来呈现 UI,您可能应该完全摆脱它作为useState
钩子,而只需使用常规 JavaScript 变量来传递值。
But even if you use it in the UI, you'll need to use different logic to check its results.但即使你在 UI 中使用它,你也需要使用不同的逻辑来检查它的结果。 For example, you could run the extra checks inside the getAccounts
function and have them use the same results as a regular variable:例如,您可以在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));
};
Alternatively, you can use a second effect that depends on the accountList
state variable to perform the check and redirect:或者,您可以使用依赖于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]);
Now the second effect will be triggered each time the accountList
is updated in the state.现在每次更新accountList
中的 accountList 时都会触发第二个效果。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.