reactjs - 为什么我的 React UseEffect（使用 Firebase onSnapshot）处于无限循环中，不断地安装和卸载？

Question

我有一个标题（我想像 facebook），并且有一个通知铃。我想收听 Firbase Firestore 上的新通知。

我已经设置了一个useEffect，但由于某种原因存在无限循环，我不确定为什么？

这是useEffect/ useState：

const [subbedToNotifications, setSubbedToNotifications] = useState(false);
//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
useEffect(() => {
    var unsubscribe = () => {
      console.log("this function does nothing");
    };
    console.log("subscribing to notifications");
    if (
      userData !== null &&
        auth.currentUser.uid !== null &&
        !subbedToNotifications
    ) {
      setSubbedToNotifications(true);
      unsubscribe = db
          .collection("users")
          .doc(auth.currentUser.uid)
          .onSnapshot((snapshot) => {
          dispatch({
            type: "SET_USERDATA",
            userData: snapshot.data(),
          });
        });
    }
    // Detach listener
    return () => {
      console.log("unsubbing from notifications");
      unsubscribe();
      setSubbedToNotifications(false);
    };
  }, [subbedToNotifications]);

因此，当组件挂载和subbedToNotifications更改时，它会运行此使用效果。围绕对 Firebase 的调用的 IF 要求userData（我在其中存储用户名、个人资料图片、简历等内容），firebase 身份验证不能为空，也不能subbedToNotifications为假。当调用 firebase 时，subbedToNotifications设置为 true，因此不应该再次调用它，并且应该只订阅一次。

也从firebase返回取消订阅，但是控制台日志重复： console.log("subscribing to notifications")并且console.log("unsubbing from notifications")不断地对数据库进行6k读取。

谁能发现我的错误，为什么useEffect会进入循环，或者为什么 Header 不断安装和卸载？

蒂亚！

标签： reactjsfirebasefirebase-realtime-databasegoogle-cloud-firestorereact-hooks

Answer 1

尝试更改[subbedToNotifications]为[]