我尝试使用useRouter获取一个特定的字符串，然后使用同一个字符串从firebase获取一个特定的文档，前面提到的操作发生在useEffect函数中，但是useEffect函数没有运行。
代码编译直接跳转到return语句，然后给我一个未定义的错误，因为变量在useEffect函数中得到一个值时没有值。
const CheckIn = () => {
const [room, setRoom] = useState();
const auth = getAuth(app);
const [user, loading] = useAuthState(auth);
console.log('loading:' +loading)
let currentUserUID = "";
const router = useRouter();
const request = router.query;
console.log(request);
useEffect(() => {
(async () => {
if (!router.isReady) return;
console.log("Useffect has ran");
if (loading) {
return <div>Authenticating</div>;
} else {
currentUserUID = user.uid;
console.log(currentUserUID);
let roomRef = collection(db, currentUserUID.toString());
const data = query(
roomRef,
where(documentId(), "==", request.roomID.toString())
);
const querySnapshot = await getDocs(data);
console.log(querySnapshot);
const docs = querySnapshot.docs.map((doc) => {
const data = doc.data();
data.id = doc.id;
return data;
});
console.log(docs[0]);
setRoom(docs[0]);
}
})();
}, [loading]);
console.log(room);
return (
<>
<Head>
Check In
</Head>
<div className="grid grid-cols-12 full-h">
<NavigationBar />
<div className="col-span-10">
<div>
<h1>Check In for {room.guests.numberOfGuests}</h1>
</div>
<div className="grid grid-cols-2 gap-6 "></div>
</div>
</div>
</>
);
};
export default CheckIn;我尝试过在useEffet钩子中使用router.isReady函数，但似乎useEffect函数被完全忽略了。
1条答案
按热度按时间ovfsdjhp1#
在你的
useEffect中包含return <div>Authenticating</div>是不正确的，你需要在你的根组件中调用它，如下所示：