React组件中useEffect仅执行一次但API请求触发两次的原因排查

可能的原因 #

• React严格模式（开发环境）：开发环境下React严格模式会重复执行useEffect回调，但你的console.log只打印一次，这点和严格模式的常规表现不符（正常严格模式下该日志也会打印两次）。可以先检查项目入口文件（如index.js）是否启用了<StrictMode>标签，生产环境下严格模式会自动关闭，不会产生重复请求。
• 组件被多次挂载：检查Header组件是否在应用的多个位置被渲染（比如路由的不同页面、父组件的多个分支中），每个组件实例都会独立触发自身的useEffect，导致多次请求。
• axios自动重试机制：如果你的axios配置了自动重试（比如使用axios-retry库或自定义拦截器），当请求遇到网络波动等情况时会自动重试，造成两次请求。
• 浏览器预加载行为：部分浏览器或扩展会对GET请求做预加载优化，误将你的API请求判定为需要预加载的资源，从而额外发送一次请求。可在浏览器开发者工具的Network面板查看请求的Initiator字段，判断是否为浏览器发起的预加载。

是否正常？需要修复吗？ #

• 若为严格模式导致，属于开发环境的正常检测行为，生产环境不会出现，无需修复。
• 若为组件重复挂载、axios配置或浏览器预加载导致，属于异常情况，会增加服务器负载，需要修复。

解决办法 #

1. 排查严格模式：查看项目入口文件，若存在<StrictMode>标签，可临时注释验证是否为此原因，但不建议长期关闭——严格模式能帮你发现内存泄漏、重复订阅等潜在问题。
2. 检查组件挂载次数：在Header组件最外层添加console.log('Header组件挂载')，查看是否打印多次，定位重复渲染的位置并调整代码结构，确保Header只挂载一次。
3. 检查axios配置：查看axios的全局配置或拦截器，关闭不必要的自动重试逻辑；也可在请求时添加{ retry: 0 }这类配置，禁用单次请求的重试。
4. 避免浏览器预加载：给API请求添加自定义请求头（如'X-No-Prefetch': 'true'），或后端在响应头中添加Cache-Control: no-store，阻止浏览器预加载。

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