英文:
Get doc function running multiple times in React
问题
我正在使用Firebase进行身份验证和存储。我正在使用React中的useContext将我的应用程序包装在身份验证层中。
一旦我从身份验证层获取用户，然后我会调用Firestore来检索用户的详细信息。但是，这个函数一直在循环调用（被多次调用）。
export default function Profile() {const { user, loading } = useContext(authContext);const [profile, setProfile] = useState({});const [dropdownOpen, setDropdownOpen] = useState(false);const router = useRouter();// 此函数一直在循环调用const handleProfile = async () => {const userProfileRef = doc(FIREBASE_FIRESTORE, "user", user.uid);try {const userProfile = await getDoc(userProfileRef);setProfile(userProfile.data());console.log("SET USER DATA");} catch (error) {console.log(error);}};if (!user && !loading) {router.push("/");}return (<div className="flex flex-col relative">{user &&!loading &&(handleProfile(),(<buttononClick={() => setDropdownOpen((prev) => !prev)}className="flex items-center gap-2.5 focus:ring-0"><Imageplaceholder="blue"alt="user profile"src={profile.image_URL}height={48}width={48}className="rounded-full bg-gray-400"/><div className="flex flex-col text-left"><p className="font-semibold">{profile.name}</p><p className="text-gray-400 text-sm">{profile.email}</p></div>{dropdownOpen ? (<FiChevronUp size={"20px"} color={"gray"} />) : (<FiChevronDown size={"20px"} color={"gray"} />)}</button>))}<div>{dropdownOpen && <UserDropdown />}</div></div>);}
如何解决这个问题？
英文:
I'm using Firebase for Authentication & Storage. I am using useContext from react to wrap my app in an authentication layer.
Once I get the user from the authentication layer I then make a call to Firestore to retrieve the users details. However, this function is being looped (called multiple times).
export default function Profile() {const { user, loading } = useContext(authContext);const [profile, setProfile] = useState({});const [dropdownOpen, setDropdownOpen] = useState(false);const router = useRouter();// THIS FUNCTION IS BEING LOOPEDconst handleProfile = async () => {const userProfileRef = doc(FIREBASE_FIRESTORE, "user", user.uid);try {const userProfile = await getDoc(userProfileRef);setProfile(userProfile.data());console.log("SET USER DATA");} catch (error) {console.log(error);}};if (!user && !loading) {router.push("/");}return (<div className="flex flex-col relative">{user &&!loading &&(handleProfile(),(<buttononClick={() => setDropdownOpen((prev) => !prev)}className="flex items-center gap-2.5 focus:ring-0"><Imageplaceholder="blue"alt="user profile"src={profile.image_URL}height={48}width={48}className="rounded-full bg-gray-400"/><div className="flex flex-col text-left"><p className="font-semibold">{profile.name}</p><p className="text-gray-400 text-sm">{profile.email}</p></div>{dropdownOpen ? (<FiChevronUp size={"20px"} color={"gray"} />) : (<FiChevronDown size={"20px"} color={"gray"} />)}</button>))}<div>{dropdownOpen && <UserDropdown />}</div></div>);}
How can I resolve this?
答案1
得分: 1
我建议将 handleProfile 移入 useEffect 中，因为它只是从你的 Firestore 获取数据：
useEffect(() => {async function handleProfile() {if (user.uid) {const userProfileRef = doc(FIREBASE_FIRESTORE, "user", user.uid);try {const userProfile = await getDoc(userProfileRef);setProfile(userProfile.data());console.log("设置用户数据");} catch (error) {console.log(error);}}};handleProfile();}, [user]);
然后，我还建议在你的 JSX 中移除 handleProfile() 的调用。
如果你正在使用 NextJS，我还建议查看它们关于数据获取的解决方案（根据你的 NextJS 版本会有所不同）。
英文:
I would recommend moving handleProfile into a useEffect as it is just getting data from your firestore:
useEffect(() => {async function handleProfile() {if(user.uid) {const userProfileRef = doc(FIREBASE_FIRESTORE, "user", user.uid);try {const userProfile = await getDoc(userProfileRef);setProfile(userProfile.data());console.log("SET USER DATA");} catch (error) {console.log(error);}}};handleProfile();}, [user]);
I would then also remove the handleProfile() call in your JSX.
If you are using NextJS I would also recommend looking into their solution for data fetching (Will vary depending on your NextJS Version)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论