通过 onAuthStateChanged 在 Firebase 中查询包含数组的用户数据时遇到无限循环问题
<p>我的当前环境是ReactJS 18.2.0，使用Firebase 10运行。</p>
<p>我目前遇到的问题是使用onAuthStateChanged在用户加载或登录页面时查询有关用户的数据。</p>
<p>以下是一个用于处理Firebase Auth的自定义服务的代码片段示例。</p>
<p>所有设置都是上下文的一部分，都是useState。</p>
<pre class="brush:js;toolbar:false;">const subscribeToAuthChanges = (
handleAuthChange,
setLoadingState,
setUserRole,
setEmail,
setFirstName,
setIsActive,
setLastName,
setLocation,
setUserID
) => {
onAuthStateChanged(auth, (user) => {
if (user) {
handleAuthChange(user);
FirebaseFirestoreService.getUserData(user.uid).then((data) => {
setUserID(user.uid);
setUserRole(data.role);
setEmail(data.email);
setFirstName(data.firstName);
setIsActive(data.isActive);
setLastName(data.lastName);
setLocation(data.location);
});
setLoadingState(false);
} else {
setLoadingState(false);
}
});
};
</pre>
<p>FirebaseFirestoreService.getUserData()函数</p>
<pre class="brush:js;toolbar:false;">const getUserData = async (id) => {
const docRef = doc(db, "users", id);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
return docSnap.data();
} else {
return null;
}
};
</pre>
<p>这不应该在useEffect中运行，上下文被创建来处理这个问题。</p>
<pre class="brush:js;toolbar:false;">import React, { useState } from "react";
import FirebaseAuthService from "../Services/FirebaseAuthService";
const FirebaseAuth = React.createContext({
user: null,
loading: true,
role: "",
email: "",
firstName: "",
isActive: false,
lastName: "",
location: "",
userID: "",
});
export const FirebaseAuthProvider = ({ children }) => {
const [user, setUser] = useState(null);
const [role, setRole] = useState(null);
const [email, setEmail] = useState("");
const [firstName, setFirstName] = useState("");
const [isActive, setIsActive] = useState(false);
const [lastName, setLastName] = useState("");
const [location, setLocation] = useState("");
const [userID, setUserID] = useState("");
const [loading, setLoading] = useState(true);
FirebaseAuthService.subscribeToAuthChanges(
setUser,
setLoading,
setRole,
setEmail,
setFirstName,
setIsActive,
setLastName,
setLocation,
setUserID
);
return (
<FirebaseAuth.Provider
value={{
user,
loading,
role,
email,
firstName,
lastName,
isActive,
location,
userID,
}}
>
{children}
</FirebaseAuth.Provider>
);
};
export default FirebaseAuth;
</pre>
<p>在这个例子中，我缺少一个查询字符串数组的设置函数，然而，以任何方式查询该数组都会导致onAuthStateChanged()不断循环，反复向Firebase发出读取请求。</p>
<p>有没有办法读取数组而不遇到这个问题？</p>
<p>我尝试通过循环遍历数组来避免遇到这个问题，然而，以任何方式查询它都会导致Firebase被反复POST请求。</p>
1
656
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
你的循环运行的原因是因为你没有在副作用中设置onAuthStateChanged()，请尝试以下操作
const FirebaseAuth = React.createContext({ user: null, loading: true, role: '', email: '', firstName: '', isActive: false, lastName: '', location: '', userID: '', }); export const FirebaseAuthProvider = ({ children }) => { const [user, setUser] = useState(null); const [role, setRole] = useState(null); const [email, setEmail] = useState(''); const [firstName, setFirstName] = useState(''); const [isActive, setIsActive] = useState(false); const [lastName, setLastName] = useState(''); const [location, setLocation] = useState(''); const [userID, setUserID] = useState(''); const [loading, setLoading] = useState(true); useEffect(() => { onAuthStateChanged(auth, (user) => { setLoading(true); if (user) { setUser(user); FirebaseFirestoreService.getUserData(user.uid).then((data) => { setUserID(user.uid); setUserRole(data.role); setEmail(data.email); setFirstName(data.firstName); setIsActive(data.isActive); setLastName(data.lastName); setLocation(data.location); }); setLoadingState(false); } else { setLoadingState(false); } }); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( <FirebaseAuth.Provider value={{ user, loading, role, email, firstName, lastName, isActive, location, userID, }} > {children} </FirebaseAuth.Provider> ); }; export default FirebaseAuth;