javascript useEffect未运行,导致未定义变量问题

vjrehmav  于 2023-01-01  发布在  Java
关注(0)|答案(1)|浏览(139)

我尝试使用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函数被完全忽略了。

ovfsdjhp

ovfsdjhp1#

在你的useEffect中包含return <div>Authenticating</div>是不正确的,你需要在你的根组件中调用它,如下所示:

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;
      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;
      });

      setRoom(docs[0]);
    })();
  }, [loading]);

  if (loading || !room) {
    return <div>Authenticating</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;

相关问题