如何成功取消订阅用户通知（firebase，react）

Question

我的用户在他们的userData 文档中有一个名为notifications 的集合。我想实时收听这些内容，以便您可以立即看到通知（如任何社交媒体应用、facebook instagram 等）。

在我的 app.js 中，我目前有这个 useEffect：

  useEffect(() => {
    //this gets the user data
    const unsubscribeUserData = async () => {
          const userData = await getUserByUserId(currentUser.uid);
          setData(userData);
    };
    //this subscribes to their notifications
  {
    /* 
    //This the unsub method
    const unsubscribe = db
      .collection("users")
      .doc(currentUser.uid)
      .collection("notifications")
      .orderBy("date", "desc")
      .onSnapshot((snapshot) => {
        let tempNotifications = [];
        snapshot.forEach((notification) => {
          console.log("adding notification: ", notification);
          tempNotifications.push(notification.data());
        });
        setNotifications(tempNotifications);
      });
    */
    }
    
    //What do I do with useRef?
    const unsubscribe = useRef();
   
    if (currentUser) {
      //If there is an auth object stored in my auth context, get their data and subscribe to their notifications
      unsubscribeUserData();
      unsubscribe();
    } else {
      //If there isn't, unsub from the notifications and set data to null
      setData(null);
      unsubscribe();
    }
    return () => {
      //If they have closed the webpage, unubscribe
      unsubscribe();
    };
  }, [currentUser]);

谁能给我一个关于如何构建它以便在需要时成功取消订阅的提示？

谢谢！

编辑（我相信这可行！）

  useEffect(() => {
    const getUserData = async () => {
      const userData = await getUserByUserId(currentUser.uid);
      setData(userData);
    };

    if (currentUser) {
      getUserData();

      return (unsubscribeRef.current = db
        .collection("users")
        .doc(currentUser.uid)
        .collection("notifications")
        .orderBy("date", "desc")
        .onSnapshot((snapshot) => {
          let tempNotifications = [];
          snapshot.forEach((notification) => {
            console.log("adding notification: ", notification);
            tempNotifications.push(notification.data());
          });
          setNotifications(tempNotifications);
        }));
    } else {
      setData(null);
    }
  }, [currentUser]);

我相信在实际快照侦听器处调用 return 与调用 cleanup return 相同，但是在这里执行此操作会跳过 not a function 错误

Answer 1

主要问题是 useEffect 钩子回调不能是 async 函数，因为它们隐式返回一个 Promise，根据设计，它会被解释为 useEffect 钩子清理函数。这行不通。

稍微查看一下您的代码后，似乎获取和设置data 状态与firebase 订阅无关。您可以仅将异步逻辑缩小到 async 函数中，以获取和设置用户数据并调用它，然后照常访问 firebase 集合。

使用 React ref 保持 unsubscribe 回调。

我认为以下实现应该让您非常接近您正在寻找的东西。 （免责声明：我没有测试过这段代码，但我认为它应该可以工作）

const unsubscribeRef = useRef();

useEffect(() => {
  const getUserData = async () => {
    const userData = await getUserByUserId(currentUser.uid);
    setData(userData);
  };

  if (currentUser) {
    getUserData();

    unsubscribeRef.current = db
      .collection("users")
      .doc(currentUser.uid)
      .collection("notifications")
      .orderBy("date", "desc")
      .onSnapshot((snapshot) => {
        let tempNotifications = [];
        snapshot.forEach((notification) => {
          console.log("adding notification: ", notification);
          tempNotifications.push(notification.data());
        });
        setNotifications(tempNotifications);
      });
  } else {
    setData(null);
  }

  return () => {
    // Unsubscribe any current subscriptions before rerender/unmount
    // Note: uses Optional Chaining operator, if this can't work for you
    // use normal null-check:
    //   unsubscribeRef.current && unsubscribeRef.current()
    unsubscribeRef?.current();
  };
}, [currentUser]);