Reactjs 使用React钩子处理auth

我已经追根究底好几个小时了，现在我想知道如何使用firebase和react钩子在我的组件上处理auth

我已经创建了一个自定义的

useAuth

hook，用于处理所有的auth行为。我的想法是在我的组件树的根上放置一个

useffect

，如果

firebase.auth.onAuthStateChanged（）

曾经更改过（即，用户现在已注销/登录）。但是，在进行了一百万次不成功的更改之后，我真的不知道我在做什么

这是我的代码

根页面组件

const RootPage = ({ Component, pageProps }): JSX.Element => {
  const { logoutUser, authStatus } = useAuth();
  const router = useRouter();

  useEffect(() => {
    authStatus();
  }, [authStatus]);

  ...
}

我的想法还可以，让我们在挂载时触发

authStatus

，但这最终导致我在依赖性方面撒谎。因此，为了避免对我的DEP撒谎，我在DEP中添加了

authStatus

。注销然后再登录会导致以下情况：

使用auth hook

const useAuth = () => {
  const { fetchUser, resetUser, userData } = useUser();
  const { currentUser } = firebaseAuth;

  const registerUser = async (username, email, password) => {
    try {
      const credentials = await firebaseAuth.createUserWithEmailAndPassword(
        email,
        password
      );
      const { uid } = credentials.user;
      await firebaseFirestore
        .collection('users')
        .doc(credentials.user.uid)
        .set({
          username,
          points: 0,
          words: 0,
          followers: 0,
          following: 0,
          created: firebase.firestore.FieldValue.serverTimestamp(),
        });
      fetchUser(uid);
      console.log('user registered', credentials);
    } catch (error) {
      console.error(error);
    }
  };

  const loginUser = async (email, password) => {
    try {
      // login to firebase
      await firebaseAuth.signInWithEmailAndPassword(email, password);
      // take the current users id
      const { uid } = firebaseAuth.currentUser;
      // update the user in redux
      fetchUser(uid);
    } catch (error) {
      console.error(error);
    }
  };

  const logoutUser = async () => {
    try {
      // logout from firebase
      await firebaseAuth.signOut();
      // reset user state in redux
      resetUser();
      return;
    } catch (error) {
      console.error(error);
    }
  };

  const authStatus = () => {
    firebaseAuth.onAuthStateChanged((user) => {
      if (user) {
        console.log('User logged in.');
        // On page refresh, if user persists (but redux state is lost), update user in redux
        if (userData === initialUserState) {
          console.log('triggered');
          // update user in redux store with data from user collection
          fetchUser(user.uid);
        }
        return;
      }
      console.log('User logged out.');
    });
  };

  return { currentUser, registerUser, loginUser, logoutUser, authStatus };
};

export default useAuth;

---

我知道问题发生的原因，但不知道解决方案…但我不完全确定…看看react的工作原理是什么，如果有家长重新渲染它，也会导致重新渲染孩子们…好吗？这意味着如果有任何原因，你的应用程序正在重新渲染，并且useAuth不断启动…因此，有很多控制台日志。但我不确定它是否会工作..给出答案告诉我你的回购协议，我会在本地电脑上试用

constrootpage=（{Component，pageProps}）：JSX.Element=>{
const{logoutUser，authStatus，currentUser}=useAuth（）；
const router=useRouter（）；
useffect（（）=>{
authStatus（）；
}，[currentUser]）；
//仅当currentUser更改时激发
...
}