reactjs - Firebase AuthStateChange 中的 setState 时无限循环

Question

我想将 Firebase 集合存储为状态，以便可以映射它并显示每个用户。我正在使用 onAuthStateChange，因此刷新页面时不会出现 uid undefine 错误。知道为什么在 onAuthStateChanged 中设置状态会导致无限循环吗？onAuthStateChange 不应该监听 React 状态的变化，而是用户状态的变化，例如登录或注销，对吗？

// userHome.js - infinite loop

export default function(){
  const [userCollection, setUserCollection] = useState();

  firebase.auth().onAuthStateChanged(isUser => {
    if (isUser) {
      const db = firebase.firestore();
      const userRef = db.collection("user").doc(currentUser.uid);
      setUserCollection(userRef);
    }
  });
}

// Auth.js

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    // Runs everytime auth state changes
    app.auth().onAuthStateChanged(user => {
      setCurrentUser(user);
      user.getIdTokenResult().then(IdTokenResult => {
        user.adminRole = IdTokenResult.claims.adminRole;
        user.shopRole = IdTokenResult.claims.shopRole;
        user.userRole = IdTokenResult.claims.userRole;
      });
      console.log("user state changed");
    });
  }, []);

  return (
    <AuthContext.Provider
      value={{
        currentUser
      }}
    >
      {children}
    </AuthContext.Provider>
  );
};

标签： reactjsfirebase