next.js 为什么4rd useEffect渲染first react js

ax6ht2ek 于 2023-11-18 发布在 React

关注(0)|答案(3)|浏览(104)

useEffect(() => {
      console.log("this is first useEffect", "first");
  });

  useEffect(() => {
    console.log("this is second useEffect", "second");
  });

  useEffect(() => {
    const listen = onAuthStateChanged(auth, (user) => {
      setLoading(true);
      if (user) {
        setAuthUser(user);
        setLoading(false);
        console.log("this is third useEffect",user)
      } else {
        setAuthUser(null);
      }
    });

    return () => {
      listen();
    };
  }, []);

  useEffect(() => {
    const db = getDatabase();

    const userId = authUser;
    console.log("this is fourth useEffect", userId);
    const starCountRef = ref(db, `users/${userId}/addressData`);
    onValue(starCountRef, (snapshot) => {
      const addresslist = [];
      snapshot.forEach((childSnapshot) => {
        const keyName = childSnapshot.key;
        const data = childSnapshot.val();
        addresslist.push({ key: keyName, data: data });
      });
      setSavedAddress(addresslist);
    });
  }, []);

字符串
我正在使用控制台日志检查哪个useEffect首先运行，但似乎第四个在第三个之前渲染。我希望第三个首先运行，因为第四个依赖于第三个

的数据

next.js

来源：https://stackoverflow.com/questions/77421537/why-4rd-useeffect-is-rendering-first-react-js

3条答案

按热度按时间

xkrw2x1b1#

效果总是按顺序运行的。日志不按顺序运行的原因是您正在记录不相关的事情。在效果1、2和4中，您在效果运行时立即记录日志。在效果3中，您设置了onAuthStateChanged侦听器，然后什么也不做。在效果3运行时没有日志发生。一段时间后，监听器被调用，并将设置状态和做日志。
由于您正在设置状态，因此组件将重新呈现。然后您可以使用它来订阅第四效果中的数据库。请确保

更改依赖关系数组，以便效果可以
检查是否有用户，因为第一个渲染不会有用户。
返回一个取消订阅函数，以便效果可以正确清理

useEffect(() => {
    const db = getDatabase();
    const userId = authUser;

    if (!userId) {
      return; // <----
    }

    const starCountRef = ref(db, `users/${userId}/addressData`);
    const unsubscribe = onValue(starCountRef, (snapshot) => {
      const addresslist = [];
      snapshot.forEach((childSnapshot) => {
        const keyName = childSnapshot.key;
        const data = childSnapshot.val();
        addresslist.push({ key: keyName, data: data });
      });
      setSavedAddress(addresslist);
    });

    return unsubscribe; // <----
  }, [authUser]); // <----

字符串

赞(0）回复(0）举报 2023-11-18

pqwbnv8z2#

在第三个useEffect中，您将在卸载时调用代码（就像您在返回块中调用它一样），因此它应该只在组件卸载时控制第三个useEffect日志。

赞(0）回复(0）举报 2023-11-18

cwxwcias3#

如果你尝试在打开花括号后记录第三个useEffect，那么你可以看到有序的结果。因为在创建组件时onAuthStateChanged没有运行。

useEffect(() => {
    // console here
    console.log("this is third useEffect")
    const listen = onAuthStateChanged(auth, (user) => {
      setLoading(true);
      if (user) {
        setAuthUser(user);
        setLoading(false);
        console.log("this is third useEffect",user)
      } else {
        setAuthUser(null);
      }
    });

    return () => {
      listen();
    };
  }, []);

字符串

赞(0）回复(0）举报 2023-11-18

我来回答

next.js 为什么4rd useEffect渲染first react js

3条答案

相关问题

热门标签

最新问答