我尝试使用 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 Hook 中使用 router.isReady 函数，但似乎 useEffect 函数被完全忽略。
最佳答案
有了return <div>Authenticating</div>在你的useEffect是不正确的。您需要在根组件外部调用它，如下所示:
const CheckIn = () => {
const [room, setRoom] = useState();
const auth = getAuth(app);
const [user, loading] = useAuthState(auth);
let currentUserUID = "";
const router = useRouter();
const request = router.query;
useEffect(() => {
(async () => {
if (loading) return;
currentUserUID = user.uid;
let roomRef = collection(db, currentUserUID.toString());
const data = query(roomRef, where(documentId(), "==", request.roomID.toString()));
const querySnapshot = await getDocs(data);
const docs = querySnapshot.docs.map((doc) => {
const data = doc.data();
data.id = doc.id;
return data;
});
setRoom(docs[0]);
})();
}, [loading]);
if (loading || !room) {
return <div>Authenticating and fetching data...</div>;
}
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;
关于javascript - useEffect 未运行并导致 undefined variable 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/74963066/