为何Axios会向服务器发送三次GET请求？

你的代码逻辑本身没问题，但出现三次请求通常是以下原因导致的：

• React 18严格模式的开发环境行为：React 18的Strict Mode会在开发环境下重复执行副作用（比如useEffect）、组件渲染等操作，用来检测潜在的代码问题，这会让请求被触发两次，加上初始的一次就会出现三次请求，生产环境下这个行为会自动消失。
• 组件被多次挂载：如果你的<Components />组件在多个地方被渲染，或者父组件的状态变化导致它反复卸载再挂载，也会触发多次请求。

具体解决办法 #

1. 处理Strict Mode导致的开发环境重复请求 #

如果只是开发环境的问题，不需要修改业务代码，生产环境会自动恢复正常。如果不想在开发阶段看到重复请求，可以去掉项目入口文件里的<StrictMode>包裹：

// index.js 入口文件示例
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
// 移除<StrictMode>标签
root.render(<App />);

2. 给请求添加取消逻辑（推荐） #

不管是什么原因导致的重复请求，都应该给Axios请求加上取消机制，避免无效请求占用资源：

import React from 'react';
import axios from "axios";

export const Components = (props) => {
  const [data, setData] = React.useState([])

  React.useEffect(() => {
    // 创建AbortController实例
    const controller = new AbortController();
    const { signal } = controller;

    axios.get('http://localhost:8000/api/posts', { signal })
      .then(res => setData(res.data))
      .catch(err => {
        // 只处理非取消类的错误
        if (!axios.isCancel(err)) {
          console.error('请求失败:', err);
        }
      });

    // 组件卸载或useEffect重新执行时取消请求
    return () => controller.abort();
  },[])

  return data.map((p, index) => (
    <p key={index}>{p.title}</p>
  ))
}

export default Components;

3. 排查组件是否被重复挂载 #

可以在组件内添加日志，确认是否被多次挂载：

export const Components = (props) => {
  console.log('组件已挂载');
  // ... 其他代码
}

如果日志打印多次，说明组件被重复渲染/挂载，需要检查父组件的逻辑，比如是否在循环中渲染了该组件，或者路由切换的问题。

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