React Query useMutation被调用两次问题排查与解决

最常见原因：React严格模式（Strict Mode） #

React 18的Strict Mode在开发环境下会刻意重复执行以下操作，用来检测潜在bug：

• 组件函数体
• useEffect、useLayoutEffect等副作用
• useMutation的mutationFn及onSuccess/onError回调

这是开发环境的正常行为，生产环境不会触发重复调用。

解决方式 #

如果要在开发中消除这个现象，暂时移除根组件外层的<StrictMode>标签：

// 原根组件代码（比如main.tsx）
root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

// 修改后
root.render(
    <App />
);

其他可能原因及排查方向 #

• 组件重复挂载/渲染：在Home组件顶部添加console.log('Home组件渲染')，确认组件是否被多次渲染。排查父组件的状态更新逻辑，避免不必要的重渲染；检查路由配置是否导致组件被重复渲染。
• axios拦截器问题：检查你的axiosInstance是否配置了请求拦截器，是否存在重复发送请求的逻辑。
• mutation调用重复：确认是否有其他代码路径调用了mutation.mutate()，比如按钮点击、其他副作用里的重复触发。

针对你的代码的额外检查 #

确保useMutation的调用在组件顶层作用域（不要放在条件判断、循环或嵌套函数里），你的当前代码已经符合这个要求，可以排除这个问题。

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