Question

我想我了解如何通过返回来分离侦听器，但在这种特定情况下，我不确定最好的方法。

我有一个 React 组件，我在其中使用 onAuthStateChanged 订阅身份验证更改。

如果它返回一个用户：我在 Firestore 中为该用户的数据创建了一个监听器。

useEffect(() => {
    return firebase.auth.onAuthStateChanged(user => {
      if (user) {
        const unsubscribeFirestore = firebase.db
          .collection('users')
          .doc(user.uid)
          .onSnapshot(doc => {
            setUser({ user, ...doc.data() })
          })
      } else {
        setUser({ user })
      }
    })
  }, [firebase])

我应该在哪里以及如何返回 unsubscribeFirestore 以分离它？

Answer 1

您的代码似乎已经从 unsubscribe 隐式返回了 firebase.auth.onAuthStateChanged 回调，但是您可以通过在局部范围变量中捕获返回的 unsubscribe 函数来使其更具必要性。

您可以在要在 useEffect 清理函数中访问的 React ref 中捕获内部快照取消订阅。

const snapShotUnsubscribeRef = useRef();

useEffect(() => {
  const unsubscribe = firebase.auth.onAuthStateChanged(user => {
    if (user) {
      snapShotUnsubscribeRef.current = firebase.db
        .collection('users')
        .doc(user.uid)
        .onSnapshot(doc => {
          setUser({ user, ...doc.data() })
        })
    } else {
      setUser({ user })
    }
  });

  return () => {
    snapShotUnsubscribeRef.current?.();
    // Or if you can't use Optional Chaining:
    //   snapShotUnsubscribeRef.current && snapShotUnsubscribeRef.current()
    unsubscribe();
  };
}, [firebase]);

Answer 2

此处是 Firebase 官方文档的 link 以了解更多详细信息。

德鲁给出的答案是正确的。要添加，我认为您不需要担心嵌套的第二个侦听器，因为 if 子句正在检查是否有用户，如果没有，则第二个侦听器无论如何都不适用。您可以尝试两个用例来测试它是否有效。

这是处理此用例的 link。所以这应该有效。

在 onAuthStateChanged 侦听器中分离 Firestore 侦听器

2 个答案: