useEffect 未运行并导致未定义的变量问题答案

【问题标题】：useEffect not running and is causing an undefined variable problemuseEffect 未运行并导致未定义的变量问题
【发布时间】：2022-12-31 02:16:35
【问题描述】：

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

【问题讨论】：

嗨 Skrrubs！我粘贴了一个答案，检查它并让我知道。

标签： javascript reactjs react-hooks next.js

【解决方案1】：

在您的 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) {
    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;

【讨论】：