如何在React useEffect中设置请求次数限制并解决无限请求问题

核心问题分析 #

你的代码出现无限请求的原因是：

• useEffect 未设置依赖数组，导致组件每次渲染（包括setDosa更新状态后）都会重新执行hola()
• hola()中每次请求成功都会调用setDosa，触发组件重渲染，进而再次执行useEffect，形成无限循环

修改后的完整代码 #

import { useState, useEffect } from 'react';

const YourComponent = ({ dv }) => {
    const [dosa, setDosa] = useState([]);
    // 跟踪当前请求轮次
    const [requestCount, setRequestCount] = useState(0);
    // 最大请求轮次限制
    const MAX_REQUESTS = 10;

    const hola = async () => {
        if (!dv || dv.length === 0) return;
        
        try {
            // 批量处理请求，避免多次setDosa触发重复渲染
            const responses = await Promise.all(
                dv.map(id => 
                    fetch(`https://www.roads.com/roads/roadscontroll/${id}`)
                        .then(res => res.json())
                )
            );
            // 一次性合并状态
            setDosa(prev => [...prev, ...responses]);
        } catch (error) {
            console.error('请求失败:', error);
        }
    };

    useEffect(() => {
        // 达到最大次数则停止请求
        if (requestCount >= MAX_REQUESTS) return;

        hola();
        // 更新请求轮次
        setRequestCount(prev => prev + 1);
    }, [requestCount, dv]); // 仅当请求轮次或dv变化时执行

    return (
        <div>{/* 你的组件内容 */}</div>
    );
};

export default YourComponent;

关键修改点说明 #

• 请求次数控制：新增requestCount状态记录已执行的请求轮次，配合MAX_REQUESTS限制最大请求次数，达到上限后终止执行
• 修复无限循环：给useEffect添加依赖数组，仅当requestCount或dv变化时才执行，避免无意义的重复触发
• 批量请求优化：用Promise.all批量发起API请求，一次性更新状态，减少组件重渲染次数，同时避免状态更新的竞态问题
• 错误处理统一：集中捕获请求错误，便于排查问题

额外优化建议 #

• 如果仅需组件挂载时执行一轮请求，可直接将依赖数组设为[dv]，去掉requestCount相关逻辑，仅在dv变化时执行一次
• 若需要轮询且控制间隔，可在useEffect中加入setTimeout，避免短时间内频繁发起请求

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