React中Axios请求页面重载时被调用两次的解决方案咨询

常见原因及解决办法 #

1. React 18 StrictMode 导致的开发环境双重执行

这是最常见的情况，React 18的StrictMode在开发模式下会刻意重复执行useEffect、组件初始化等逻辑，用来检测潜在的副作用问题，生产环境下不会出现这个现象。

解决方式：

• 临时关闭StrictMode：找到项目根目录下的index.js（或main.jsx），去掉<React.StrictMode>的包裹。比如原本的代码：

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

改成：

ReactDOM.createRoot(document.getElementById('root')).render(
    <App />
);

• 如果不想关闭StrictMode，也可以不用特意处理，因为生产环境不会有这个问题，它只是开发阶段的检测机制。

2. 组件重复挂载

检查是否存在App组件被多次渲染的情况，比如路由配置里重复引入App，或者父组件多次渲染App。这种情况需要排查组件树，确保App只被挂载一次。

3. 给请求加取消机制（推荐）

即使出现重复触发的情况，也可以通过AbortController取消重复请求，避免无效调用。修改你的useEffect代码：

useEffect(()=>{
  const controller = new AbortController();
  const fetchDetails=async ()=>{
    try {
      const {data}=await Axios.get("https://randomuser.me/api/", {
        signal: controller.signal
      });
      console.log("RESPONSE:",data);
      const details=data.results[0];
      setDetails(details)
    } catch (error) {
      if (error.name !== 'AbortError') {
        // 处理其他错误
        console.error('请求出错:', error);
      }
    }
  }
  fetchDetails();
  return () => controller.abort(); // 组件卸载或重新渲染时取消请求
},[])

这样即使useEffect被执行两次，第二次请求会被前一次的清理函数取消，不会触发重复的API调用。

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