Question

我有一个用于处理Firebase身份验证的useEffect。当我注销然后再次登录时，我看到此效果称为两次。每次退出并重新登录时，这称为额外时间。

我觉得我需要使用清理功能来处理它，但是我不知道该怎么写。

这是我的钓钩：

useEffect(() => {
  console.log('RUNNING THE EFFECT');
  function routeUser(user) {
    // Redirect user somewhere depending on user state
  }
  function setupUser(user: User) {
    // sets the user state object
    routeUser(user);
  }
  if (!user) {
    firebase.auth().onAuthStateChanged((authUser) => {
      if (authenticatedUser) {
        callGraphQLMethod({ variables: { uid: authUser.uid, phoneNumber: authUser.phoneNumber } })
          .then(async (document) => {
            setupUser(...);
          });
      }
    });
  } else {
    // User object is already in state. use that instead
  }
  return () => {
    // >>>>>>>> How do I clean all this up?
  } 
}, [callGraphQLMethod, setUser, user]);

Answer 1

许多类似这样的函数返回清除函数以退订资源。 onAuthStateChanged似乎也是如此。

onAuthStateChanged

onAuthStateChanged ( nextOrObserver :  Observer < any > | ( ( a : 
  User | null ) => any ) ,  error ? :  ( a :  Error ) => any , 
  completed ? :  firebase.Unsubscribe ) : firebase.Unsubscribe

声明一个变量来保存unsubscribe回调函数
捕获onAuthStateChanged调用中的返回值
从效果中返回清除函数以调用unsubscribe

具有清理功能的更新效果可取消订阅事件流。

useEffect(() => {
  let unsubscribe;

  ...

  if (!user) {
    unsubscribe = firebase.auth().onAuthStateChanged((authUser) => {
      ...
    });
  } else {
    ...
  }

  return () => {
    unsubscribe?.();
  } 
}, [callGraphQLMethod, setUser, user]);

React useEffect清理多种功能

1 个答案: