React应用持续发送无限HTTP请求问题及解决方案咨询

问题根源分析 #

你当前的代码陷入了无限循环：useEffect的依赖数组包含users，而fetchData中调用setUsers会更新users状态，状态更新后又触发useEffect重新执行fetchData，如此反复导致无限请求。

解决方案 #

最直接且高效的处理方式是切断这个循环链，同时保证数据更新后页面能重新渲染，具体有两种常用实现方式：

方案1：初始加载+手动触发更新（推荐）

只在组件挂载时请求一次数据，之后在修改/新增数据的操作完成后，手动调用fetchData刷新页面。

const [users, setUsers] = useState([]);

async function fetchData() {
    const res = await fetch("http://localhost:8000/users/");
    if (res.status === 401) {
        console.log(await res.json()); // 修正：res.json是方法，需调用获取响应体
    } else {
        setUsers(await res.json());
    }
}

// 仅组件挂载时执行一次初始请求
useEffect(() => {
    fetchData();
}, []);

// 示例：修改用户数据后手动刷新
const handleUpdateUser = async (updatedUser) => {
    // 发送修改请求
    await fetch(`http://localhost:8000/users/${updatedUser._id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(updatedUser)
    });
    // 请求成功后调用fetchData更新页面数据
    fetchData();
};

// 示例：新增用户后手动刷新
const handleAddUser = async (newUser) => {
    await fetch("http://localhost:8000/users/", {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(newUser)
    });
    fetchData();
};

方案2：用useCallback稳定fetchData引用（适合有额外依赖的场景）

如果fetchData需要依赖其他变量（比如用户token），可以用useCallback包裹它，确保只有依赖变化时才重新创建函数，避免不必要的useEffect触发。

const [users, setUsers] = useState([]);
// 假设需要依赖token
const [token, setToken] = useState(localStorage.getItem('token'));

// 用useCallback稳定fetchData引用，仅当依赖变化时重新创建
const fetchData = useCallback(async () => {
    const res = await fetch("http://localhost:8000/users/", {
        headers: { Authorization: `Bearer ${token}` }
    });
    if (res.status === 401) {
        console.log(await res.json());
    } else {
        setUsers(await res.json());
    }
}, [token]); // 依赖token，仅token变化时重新生成函数

// useEffect依赖稳定后的fetchData
useEffect(() => {
    fetchData();
}, [fetchData]);

额外优化建议 #

可以添加加载状态和错误处理，提升用户体验：

const [users, setUsers] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const [error, setError] = useState(null);

async function fetchData() {
    setIsLoading(true);
    setError(null);
    try {
        const res = await fetch("http://localhost:8000/users/");
        if (!res.ok) throw new Error(`请求失败：${res.status}`);
        
        if (res.status === 401) {
            const errMsg = await res.json();
            setError("未授权，请重新登录");
            console.log(errMsg);
        } else {
            setUsers(await res.json());
        }
    } catch (err) {
        setError(err.message);
        console.error("获取数据失败：", err);
    } finally {
        setIsLoading(false);
    }
}

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