为什么我的firebase“onAuthStateChanged”没有从useEffect Hook中清除？

Question

我从控制台收到此错误“警告：无法对未安装的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。 这是我的功能：

useEffect(() => {
    let isMounted = true;
    const onSubscribe = () => {
      auth.onAuthStateChanged((userAuth) => {
        if (userAuth && isMounted) {
          dispatch(
            login({
              email: userAuth.email,
              uid: userAuth.uid,
              displayName: userAuth.displayName,
              photoUrl: userAuth.photoURL,
            })
          );
        } else if (!userAuth && isMounted) {
          dispatch(logout());
        }
      });
    };
    onSubscribe();
    return () => {
      isMounted = false;
    };
  }, []);

我也试过这种方法

  useEffect(() => {;
    const onSubscribe = () => {
      auth.onAuthStateChanged((userAuth) => {
        if (userAuth) {
          dispatch(
            login({
              email: userAuth.email,
              uid: userAuth.uid,
              displayName: userAuth.displayName,
              photoUrl: userAuth.photoURL,
            })
          );
        } else if (!userAuth) {
          dispatch(logout());
        }
      });
    };
    onSubscribe();
    return () => {
      onSubscribe()
    };
  }, []);

Answer 1

你可以这样试试吗：

useEffect(() => {
    const unsubscribe =  auth.onAuthStateChanged((userAuth) => {
        if (userAuth && isMounted) {
          dispatch(
            login({
              email: userAuth.email,
              uid: userAuth.uid,
              displayName: userAuth.displayName,
              photoUrl: userAuth.photoURL,
            })
          );
        } else if (!userAuth && isMounted) {
          dispatch(logout());
        }
      });
    
    return unsubscribe;
  }, []);