React登出组件多次调用Logout API问题求解决方案

你的问题核心是API调用和localStorage操作直接写在组件顶层代码中，每次组件渲染（包括状态更新后的重渲染）都会重复执行这些逻辑，导致多次调用后端接口。

解决方案：使用useEffect控制执行时机 #

把登出逻辑（清除localStorage、调用API）放到useEffect钩子中，通过设置空依赖数组，让这段逻辑仅在组件首次挂载时执行一次，避免重复触发。

修改后的代码如下：

import React, { useState, useEffect } from "react";
import Axios from "axios";
import { Navigate } from "react-router-dom";
import "../assets/css/login.css";
import "react-toastify/dist/ReactToastify.css";
import API from "../backend";

const Signout = () => {
  const [redirect, setRedirect] = useState(false);

  useEffect(() => {
    const handleSignout = async () => {
      // 清除本地存储的token
      if (typeof window !== "undefined") {
        localStorage.removeItem("TWjwt");
      }
      try {
        await Axios.get(`${API}/logout`);
        console.log("登出成功");
        setRedirect(true);
      } catch (error) {
        console.error("登出失败:", error);
        // 可在这里添加错误提示逻辑，比如toast
      }
    };

    handleSignout();
  }, []); // 空依赖数组确保仅执行一次

  return redirect ? <Navigate to="/" /> : null;
};

export default Signout;

关键改动说明 #

• 将登出逻辑封装到useEffect中，空依赖数组[]表示该副作用仅在组件挂载时运行一次。
• 把reDirect变量名修正为更规范的redirect（符合命名习惯）。
• 移除了未使用的Link导入，精简代码。
• 组件未完成登出时返回null，替代空片段，逻辑更清晰。

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