Javascript 在auth listener中从Firestore获取文档创建无限循环nextjs

每次身份验证状态更改时，我都尝试从Firestore获取数据。我创建了一个函数，用于获取数据和存储数据的状态：

const [userData, setUserData] = useState();

  const getUserData = async () => {
    const userRef = fire
      .firestore()
      .collection("users")
      .doc(fire.auth().currentUser.email);

    const doc = await userRef.get();
    let tempUser = doc.data();
    setUserData(tempUser);
  };

然后我有了听众：

  //AUTH STATE OBSERVER

  fire.auth().onAuthStateChanged((user) => {
    if (user) {
      getUserData()
    } else {
      console.log("user not logged in");
    }
  });

---

这将启动一个无限循环。我似乎不明白为什么-对我来说，它应该只在身份验证状态更改时函数启动一次，并且该函数不应影响身份验证状态。

与普通的观察者不同，

onAuthStateChanged

将在当前用户状态可用时立即启动

因此，在每次渲染时，您都会调用正在传递的“侦听器”，然后该侦听器检索数据，更新状态，生成新的渲染，然后该渲染会重复该过程

监听用户数据更改的正确方法是使用：

const [user, setUser] = useState(() => {
  // If a user is already logged in, use the current User object, or `undefined` otherwise.
  return fire.auth().currentUser || undefined;
});
const [userData, setUserData] = useState();

// keeps `user` up to date
useEffect(() => fire.auth().onAuthStateChanged(setUser), []);

// keeps `userData` up to date
useEffect(() => {
  if (user === null) {
    setUserData(null); // <-- clear data when not logged in
    return;
  }

  if (!user) {
    // user still loading, do nothing yet
    return;
  }

  return fire // <-- return the unsubscribe function from onSnapshot
    .firestore()
    .collection("users")
    .doc(fire.auth().currentUser.email)
    .onSnapshot({
      next(snapshot) {
        setUserData(snapshot.data());
      },
      error(err) {
        // TODO: handle errors
      }
    });
}, [user]); // <-- rerun when user changes

const[user，setUser]=useState（（）=>{
//如果用户已登录，请使用当前用户对象，否则使用“未定义”。
return fire.auth（）.currentUser | |未定义；
});
const[userData，setUserData]=useState（）；
//使“用户”保持最新
useEffect（（）=>fire.auth（）.onAuthStateChanged（setUser），[]）；
//使“userData”保持最新
useffect（（）=>{
如果（用户===null）{
setUserData（空）//