页面加载时Axios发送重复POST请求问题排查

核心问题1：React开发环境Strict Mode导致请求触发两次 #

React 18的Strict Mode在开发环境下会刻意重复执行副作用（比如useEffect），用来检测组件中可能存在的副作用泄漏问题。你的useEffect依赖为空数组，开发时会被调用两次，导致getData执行两次，进而发送两次POST请求。这个行为仅存在于开发环境，生产环境会自动消失。

核心问题2：AbortController使用逻辑混乱 #

你的getData函数里，发起axios请求后立刻执行了controller.abort()，会直接中止刚发起的请求；同时在then回调里又再次调用controller.abort()，逻辑完全错误。正确的做法是在组件卸载或useEffect清理阶段中止请求，避免内存泄漏。

修复后的代码 #

const [isLoading, setIsLoading] = useState(true);
const [userData, setUserData] = useState({
  name: "",
  username: "",
  email: ""
});

useEffect(() => {
  const controller = new AbortController();
  
  const getData = async () => {
    try {
      const response = await axiosInstance.post("/api/detail/", {
        signal: controller.signal
      });
      setUserData({
        name: response.data.name,
        username: response.data.username,
        email: response.data.email
      });
      console.log(response);
      setIsLoading(false);
    } catch (err) {
      // 忽略请求被中止的错误
      if (err.name !== "CanceledError") {
        console.log("error is", err);
      }
    }
  };

  getData();

  // 组件卸载或useEffect重新执行时中止请求
  return () => controller.abort();
}, []);

额外说明 #

• 关于JWT：Postman请求正常说明后端JWT验证逻辑无问题，两次请求的根源是前端触发了两次，和JWT无关。
• 若想在开发环境临时避免两次请求，可移除index.js中的<React.StrictMode>包裹，但不推荐——Strict Mode能帮你提前发现潜在的组件问题。

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