在authlistener中从Firestore获取文档，创建一个无限循环nextjs

Question

每次身份验证状态更改时，我都会尝试从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");
}
});

这将启动一个无限循环。我似乎不明白为什么——对我来说，只有当函数在身份验证状态更改时才应该触发一次，而函数不应该影响身份验证状态。。

Answer 1

与普通观察器不同，如果当前用户状态可用，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