React中Axios请求重复触发问题咨询——为何连续发起8次API调用？

兄弟，这问题我太熟了——你把API请求直接写在了组件的函数体顶层，这就是导致多次请求的核心原因！

问题根源 #

React组件的函数体代码会在每次组件渲染时从头执行一遍，而以下几种情况都会触发组件重新渲染：

• 组件自身的状态更新（比如你调用setUser修改user状态）
• 父组件重新渲染
• React 18的Strict Mode（开发环境下会强制组件双重渲染，用来检测副作用问题）

你的代码里，每次组件渲染都会调用getAllData()，请求完成后又会调用setUser触发新一轮渲染，相当于进入了“渲染→请求→更新状态→再渲染”的循环，再加上Strict Mode的双重渲染放大了次数，最终就出现了连续8次请求的情况。

解决方案：用useEffect控制请求时机 #

React提供了useEffect钩子专门用来处理这类副作用操作（比如API请求、DOM操作等），我们可以把API请求放到useEffect里，并设置合适的依赖项，确保它只在需要的时候执行。

修改你的Request组件代码：

import '@css/request.scoped.css';
import { useState, useEffect } from 'react'; // 别忘了导入useEffect
import { getAllData } from '@api/api';

function Request() {
  const [user, setUser] = useState(''); // 建议用const，状态通过setUser修改即可

  useEffect(() => {
    // 把API请求放到useEffect中
    getAllData().then((reply) => {
      setUser(reply.data[0].item_name);
    });
  }, []); // 空依赖数组：只在组件挂载时执行一次

  return <> {user} </>;
}

export default Request;

额外说明 #

• 空依赖数组[]告诉React，这个副作用只在组件第一次挂载时执行一次，后续不管组件怎么渲染都不会再触发，完美解决多次请求的问题。
• 开发环境下Strict Mode可能会让useEffect执行两次（这是React的故意设计，帮你发现副作用的潜在问题），但生产环境下只会执行一次，不用担心。
• 你的Axios配置是没问题的，baseURL: './example.json'加上空url，确实会请求本地的这个JSON文件。如果只是读取本地JSON，也可以直接用import exampleData from './example.json'的方式，省去Axios请求的步骤，不过用Axios也完全没问题。

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