如何避免React useEffect触发RTK Query mutation执行两次？

问题原因 #

React 18+开发模式下，StrictMode会强制重复执行useEffect等副作用钩子，用来检测潜在的代码问题（比如未清理的副作用）。同时你当前代码还存在一个问题：调用validate时token的状态还没完成更新——因为setToken是异步操作，第一次调用validate时可能传入的是初始的undefined。

解决方案 #

拆分副作用逻辑，让接口调用仅在token有效时触发，避免重复执行：

/* eslint-disable */
import React, { useEffect, useState } from "react";
import { usePostValidateMutation } from "features/apiSlice";

export const App = () => {
  const [postValidate] = usePostValidateMutation();
  const [token, setToken] = useState(undefined);

  // 仅负责从URL提取token并更新状态
  useEffect(() => {
    const queryParameters = new URLSearchParams(window.location.search);
    const tokenParam = queryParameters.get("token");
    console.log(tokenParam);
    setToken(tokenParam);
  }, []);

  // 当token存在时，调用验证接口
  useEffect(() => {
    const validate = async () => {
      await postValidate(token)
        .unwrap()
        .then((data) => console.log(data))
        .catch((error) => console.log(error));
    };

    // 只有token不为空时才执行接口调用
    if (token) {
      validate();
    }
  }, [token, postValidate]);

  return (
    <div className="container-fluid">
      <Stats />
    </div>
  );
};

export default App;

代码说明 #

• 第一个useEffect仅处理URL参数的提取和状态更新，即使在StrictMode下执行两次，由于tokenParam值不变，setToken不会触发额外重渲染。
• 第二个useEffect依赖token和postValidate，只有当token变为有效值时才会执行validate，确保接口只会被调用一次。
• 增加token存在性判断，避免传入undefined调用接口。

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