React中Axios请求异常：大量请求致服务器卡顿及图片加载问题

一、请求泛滥问题：必须限制请求 #

你的代码里useEffect未添加依赖项，会导致组件每次渲染（包括state更新、父组件重渲染等）都重复发起请求，这就是产生几千次请求的核心原因，直接耗尽服务器资源，进而影响其他页面的资源加载。

修复步骤： #

1. 添加正确的依赖项：将id加入useEffect的依赖数组，仅当id变化时才重新发起请求，彻底避免无意义的重复请求：

const [data, SetData] = useState([]);

useEffect(() => {
        axios.get(`/api/data/${id}`).then((response) => {
            SetData(response.data)
        })
}, [id]) // 添加id作为依赖

2. 取消未完成请求：防止组件卸载或id变化时，旧请求仍在执行造成资源浪费，用AbortController实现：

const [data, SetData] = useState([]);

useEffect(() => {
        const controller = new AbortController();
        axios.get(`/api/data/${id}`, {
            signal: controller.signal
        }).then((response) => {
            SetData(response.data)
        }).catch(error => {
            // 忽略请求取消的错误
            if (axios.isCancel(error)) return;
            // 处理其他业务错误
        })
        
        // 组件卸载或依赖变化时取消请求
        return () => controller.abort();
}, [id])

二、添加空依赖[]后Public图片无法显示的问题 #

根本原因： #

空依赖数组[]会让useEffect仅在组件第一次挂载时执行一次，如果id是在挂载后才获取到（比如从路由参数、父组件props异步传递），请求会因id未就绪而失败，data始终为空数组，导致你用data字段拼接的图片路径无效；另外Public文件夹的图片路径写法也容易出错。

解决方案： #

1. 放弃空依赖数组：改用[id]作为依赖（如第一个问题的修复方式），确保id变化时能重新获取数据，保证data正确填充，图片路径正常生成。
2. 修正Public图片路径写法：Public中的图片直接用根路径访问，比如图片存放在public/avatar.jpg，代码中需写/avatar.jpg，不要写public/avatar.jpg或相对路径。
3. 添加加载状态判断：数据未加载完成时，避免渲染无效图片或显示占位符：

if (!data.length) {
    return <div>加载中...</div>;
}

// 正确渲染图片
return <img src={`/${data.avatar}`} alt="用户头像" />;

内容的提问来源于stack exchange，提问作者Omar Dak Elbab