React请求Firebase API时如何用useState存用户数据避免无限循环

算力阿峰

2026-8-29

问题根因

你在组件函数的顶层直接执行byEmail()请求，React每次组件重渲染都会重新调用这个方法发起请求，请求完成后如果触发状态更新就会再次引发重渲染，直接形成「渲染→发请求→更新→重渲染」的无限死循环
auth.onAuthStateChanged监听器同样写在组件顶层，每次重渲染都会注册全新的监听器，重复触发setcurrentUser更新，会进一步放大循环问题
没有定义专门存储匹配到的用户全量资料的状态，就算控制台能打印出目标数据，也没法在组件的JSX部分正常访问渲染

修复后完整代码

import { useState, useEffect, useContext } from 'react';
import { useNavigate } from 'react-router-dom';
import { Card, Button } from 'react-bootstrap';
import { auth } from '你的firebase配置文件路径'; // 替换为项目实际的auth引入路径
import { UserProvider } from '你的UserProvider上下文路径'; // 替换为项目实际的上下文路径

const Dashboard = () => {
    const [error, setError] = useState("");
    const [userProfile, setUserProfile] = useState(null); // 专门存储匹配到的用户全量资料
    const { setcurrentUser, currentUser, logout } = useContext(UserProvider);
    const navigate = useNavigate();

    const handleLogOut = async () => {
        setError("");
        try {
            await logout();
            navigate("/login");
        } catch (err) {
            setError(err.message);
        }
    };

    // 所有副作用逻辑统一放到useEffect中管理
    useEffect(() => {
        // 注册auth状态监听，组件卸载时自动清理
        const unsubAuth = auth.onAuthStateChanged((authUser) => {
            if (authUser) {
                setcurrentUser(authUser);
            }
        });

        // 拉取对应用户数据的逻辑
        const fetchUserProfile = async () => {
            if (!currentUser?.email) return; // 登录邮箱不存在时不发起无效请求
            const url = "https://skitter-9e5e3-default-rtdb.europe-west1.firebasedatabase.app/users.json";
            try {
                const response = await fetch(url);
                const data = await response.json();
                const userKeys = Object.keys(data);
                // 修正原循环的越界问题，用<替代<=
                for (let i = 0; i < userKeys.length; i++) {
                    const currentItem = data[userKeys[i]];
                    if (currentItem.email === currentUser.email) {
                        setUserProfile(currentItem); // 匹配到后存入全局可访问的状态
                        break; // 找到目标立刻终止循环，减少无效遍历
                    }
                }
            } catch (err) {
                setError("用户资料拉取失败");
            }
        };

        fetchUserProfile();

        // 组件卸载时清理auth监听器，避免内存泄漏
        return () => unsubAuth();
    }, [currentUser?.email, setcurrentUser]); // 仅当登录用户邮箱变化时重新执行逻辑

    // 资料加载中兜底展示，避免数据未就绪时访问属性报错
    if (!userProfile) {
        return <div>加载中...</div>
    }

    return (
        <>
            <Card>
                <Card.Body className="text-center">
                    {/* 头像渲染 */}
                    {userProfile.avatar && <img src={userProfile.avatar} alt="用户头像" style={{width: "80px", borderRadius: "50%", marginBottom: "1rem"}} />}
                    <div>
                        <strong>姓名：{userProfile.name /* 对应Joe Black */}</strong>
                    </div>
                    <div>
                        <strong>Email: {currentUser.email /* 对应newadmin@gmail.com */}</strong>
                    </div>
                    {/* 后续新增个人简介等模块，直接取userProfile.bio等对应字段即可 */}
                </Card.Body>
            </Card>
            {error && <div className="text-danger mt-2">{error}</div>}
            <div>
                <Button variant="link" onClick={handleLogOut}>
                    Log out
                </Button>
            </div>
        </>
    );
};

export default Dashboard;

关键修改说明

所有副作用逻辑（auth状态监听、接口请求）全部移入useEffect钩子管控，依赖项只保留currentUser?.email和setcurrentUser，只有登录用户变化时才会重新拉取资料，从根源解决无限请求的问题
新增userProfile状态专门存储从数据库匹配到的用户全量信息，组件内任意位置都可以直接访问该对象的字段，后续扩展个人简介、用户名等信息不需要额外改数据拉取逻辑
修正了原遍历逻辑的越界bug：原写法用i <= Object.keys(data).length会导致最后一次迭代取到不存在的键，访问email属性直接报错，改成i < 长度符合数组/对象遍历的通用规范
增加了加载兜底态和错误提示，避免数据还没拉到时访问嵌套属性抛出白屏错误
匹配到目标用户后立刻break终止循环，不需要遍历完所有用户数据，减少不必要的性能消耗

内容的提问来源于stack exchange，提问作者kacperj513