firebase.auth().onAuthStateChanged 无限循环答案

【问题标题】：firebase.auth().onAuthStateChanged looping infinitelyfirebase.auth().onAuthStateChanged 无限循环
【发布时间】：2021-06-03 01:35:08
【问题描述】：

我有这个代码：

function App() {
  const { setUser } = useContext(UserContext);
  firebase.auth().onAuthStateChanged((user) => {
    console.log("test");
    if (user) {
      console.log("user");
      setUser({ id: user.uid, email: "" });
    } else {
      console.log("null");
      setUser(null);
    }
  });

  return (
    <Container>
      <Router />
    </Container>
  );
}

用户上下文：

const initialState = {
  email: null,
  id: null,
};

export interface IUserContext {
  user: IUser | null;
  setUser: React.Dispatch<IUser | null>;
}

export const UserContext = createContext<IUserContext>({
  user: initialState,
  setUser: () => {},
});

interface IUserContextProvider {
  children: JSX.Element;
}
export function UserContextProvider({ children }: IUserContextProvider) {
  const [user, setUser] = useState<IUser | null>(initialState);
  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

我正在尝试在登录或注销时设置用户对象。问题是这会无限循环。我该如何阻止这种情况发生？我基本上只是想知道某人何时登录或注销。

【问题讨论】：

标签： javascript reactjs typescript firebase firebase-authentication

【解决方案1】：

这可能是您的 Provider 本身的责任，并在它的 useEffect 中运行，如下所示：-


export function UserContextProvider({ children }: IUserContextProvider) {
  const [user, setUser] = useState<IUser | null>(initialState);

useEffect(()=>{
   const unsubscribe = firebase.auth().onAuthStateChanged((user) => {
    console.log("test");
    if (user) {
      console.log("user");
      setUser({ id: user.uid, email: "" });
    } else {
      console.log("null");
      setUser(null);
    }
  });
 return unsubscribe;
},[])

  return (
    <UserContext.Provider value={{ user, setUser }}>
      {children}
    </UserContext.Provider>
  );
}

onAuthStateChanged 只需要注册一次，所以[] 依赖数组useEffect 是它的正确位置。 unsubscribe 仅在此组件卸载时才起作用，除非您退出网站，否则您不会发生这种情况。

【讨论】：