尝试获取用户的身份验证状态firebase时反应本机useEffect渲染问题

Question

我对 useEffect 有疑问。当我尝试在onAuthStateChanged 之后获取用户的身份验证状态时，useEffect 中的调用次数非常高。有时它也会给出这个错误：

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

This is the amount of logs after the user login/registers and logout。也许我不太了解 useEffect 是如何工作的。这是使用useEffect的代码：

useEffect(async () => {
    let isCancelled = false;
    await firebase.auth().onAuthStateChanged(async (user) => {
      if (user && !isCancelled) {
          await firebase
          .firestore()
          .collection('users')
          .doc(user.uid)
          .get()
          .then((document) => {
            const userData = document.data()
            console.log(document.data())
            setUser(userData);
            setIsSignedIn(true);
            setLoading(false);
          })
          .catch((error) => {
            setLoading(false);
            alert(error)
          });
        }else{
          console.log('user does not exist')
          setIsSignedIn(false);
          setLoading(false);
        }
    });
    return () => {
      isCancelled = true;
    }
  }, []);

This is the image of it. Maybe it's more clear

Answer 1

一般来说，每个useEffect 应该负责一项任务。此外，当前使用 isCancelled 的方法实际上并没有像应有的那样清理侦听器。

对于反应，您应该尽可能使用实时更新。您还将受益于能够轻松分离侦听器。

这是一个你可以使用的脚手架。

// Set up a state variable to contain the user's info
// If a user is already logged in and validated, user is immediately
// set to their User object, otherwise show loading icon while we check
const [user, setUser] = useState(() => firebase.auth().currentUser || undefined);
const userLoading = user === undefined;
const isSignedIn = !!user;

// Set up a state variable to contain the user's data
const [userData, setUserData] = useState(undefined);

// Set up a state variable to contain whether this component is loading
const [loading, setLoading] = useState(true);

// effect to track user state and update `user` for any changes
// onAuthStateChanged returns its own cleanup function
useEffect(() => firebase.auth().onAuthStateChanged(setUser), []); // <- don't rerun

// effect to navigate to login
useEffect(() => {
  if (user === null) {
    // user is signed out
    navigation.navigate('login');
  }
}, [user]); // <- rerun when user changes

useEffect(async () => {
  if (!isSignedIn) return; // you could write this as `userLoading || !isSignedIn`, but it's redundant

  return firebase.firestore()
    .collection('users')
    .doc(user.uid)
    .onSnapshot({ // <- onSnapshot() returns its own cleanup function
      next(docSnapshot) {
        const userData = docSnapshot.data();
        setUserData(userData);
      },
      error(err) {
        console.error(err);
        alert(err);
      }
    });
}, [user]); // <- rerun when user changes

作为一个学习项目，可以考虑将其制成Context 或创建您自己的useAuth 函数，您可以在其中提取用户数据、用户对象和加载状态。

Answer 2

试试这个

useEffect(async () => {
    let isCancelled = false;
    const unsubscribe = await firebase.auth().onAuthStateChanged(async (user) => {
       ........ 
    });
    return () => {
      // cleanup 
     unsubscribe() 
      isCancelled = true;
    }
  }, []);

让我知道它是否对你有用