为何Axios会发送2次请求？附React组件代码示例

导致Axios发送两次请求的核心原因有两个：

1. useEffect依赖数组位置错误
   你把空数组[]放在了axios.get的then方法第二个参数（错误处理函数的位置），而非useEffect的第二个参数。这会让useEffect没有设置任何依赖项，每次组件渲染时都会重复执行这个effect。

2. React 18开发模式的StrictMode特性
   在React 18的开发环境中，StrictMode会强制组件渲染两次（包括执行两次effect），目的是提前检测未清理的副作用等潜在问题。叠加上面的依赖配置错误，就直接导致了请求被发送两次。

将空数组移到useEffect的第二个参数位置，让effect仅在组件首次挂载时执行一次：

const Test= () => {
  useEffect(() => {
    axios.get("test")
      .then((data) => {
        console.log(data.data.test);
      })
      .catch(err => {
        // 建议添加错误处理逻辑
        console.error("请求失败:", err);
      });
  }, []); // 此处为useEffect的依赖数组位置

  return (
    <>
      <h1>Hello World</h1>
    </>
  );
};

额外提醒：

• 务必给axios请求添加catch处理，避免请求失败时抛出未捕获异常
• 生产环境下StrictMode的双重渲染会自动关闭，但正确配置effect依赖是保证组件性能的基础

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