StrictMode下RTK Query mutation重复执行的解决方法咨询

问题场景 #

我在使用RTK Query实现用户邮箱验证功能时遇到了问题，核心代码如下：

// ...imports

const ConfirmEmail = () => {
  const [params] = useSearchParams();

  const [confirmEmail, { isLoading, isSuccess, isUninitialized, error }] =
    useConfirmEmailMutation();

  useEffect(() => {
    if (isUninitialized) {
      confirmEmail({
        email: params.get('email'), // 从验证链接获取
        code: params.get('code'), // 从验证链接获取
      })
        .unwrap()
        .then(() => {
            // 成功处理逻辑...
        })
        .catch((e) => {
            // 错误处理逻辑...
        });
    }
  });

  // ...其他组件代码
}

在开发环境的React StrictMode模式下，这个Mutation会被执行两次，导致API端出现并发错误——开发者工具中能看到两个网络请求，一个成功一个失败，最终组件显示的结果不一致。

我知道这个问题仅发生在开发阶段，尝试过遵循React官方文档的指引，也试过RTK Query文档中提到的fixedCacheKey，但都无法在开发环境中得到一致的执行结果。

问题核心原因 #

这个问题本质是React StrictMode的重复渲染/Effect触发机制导致的，但和普通Query不同：RTK Query中重复的Query请求会被缓存拦截，不会发起新请求，但Mutation本身就是设计用来执行有副作用、不应该重复执行的操作（比如数据修改、状态变更），因此不会有缓存拦截逻辑。邮箱验证属于典型的一次性Mutation操作，而且useEffect的清理函数对此场景无效，也不属于需要用户手动触发（比如点击购买按钮）的场景。

可行解决方案 #

经过讨论，目前有三种可选方案：

• 用Query替代Mutation：语义完全不正确，不推荐
• 让用户点击按钮触发验证：破坏自动验证的流畅体验，体验不佳
• 使用Ref跟踪Mutation是否已执行：这是最终采用的可行方案，通过Ref标记执行状态，避免重复触发Mutation

最终方案的代码实现如下：

// ...imports

const ConfirmEmail = () => {
  const verifying = useRef(false);

  const [params] = useSearchParams();

  const [confirmEmail, { isLoading, isSuccess, isUninitialized, error }] =
    useConfirmEmailMutation();

  useEffect(() => {
    if (!verifying.current && isUninitialized) {
      verifying.current = true;

      confirmEmail({
        email: params.get('email'), // 从验证链接获取
        code: params.get('code'), // 从验证链接获取
      })
        .unwrap()
        .then(() => {
            // 成功处理逻辑...
        })
        .catch((e) => {
            // 错误处理逻辑...
        });
    }
  });

  // ...其他组件代码
}

这里通过useRef创建的verifying变量标记Mutation是否已经执行过，因为Ref的.current值不会在组件重新渲染时重置，所以能有效阻止StrictMode下的第二次触发。

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