React Material UI：令牌过期时打开登录弹窗问题求助

这个问题我碰到过好多次了，本质就是组件卸载后定时器还在偷偷运行，导致调用了已经被销毁的组件的setState，所以才会弹出那个警告，同时你的登录弹窗逻辑也因为定时器没及时清理而失效。下面给你两种场景的解决方案，对应函数组件和类组件：

核心问题分析 #

你用setInterval创建了定时检测令牌的任务，但没有在组件卸载时清除它。当组件已经被从DOM中移除（比如路由跳转），定时器依然会触发回调，这时候调用setState就会触发React的警告，而且因为组件已经卸载，你的登录弹窗逻辑自然也无法正常执行。

解决方案：函数组件版本（React Hooks） #

用useRef保存定时器ID，配合useEffect的清理函数在组件卸载时清除定时器，同时在令牌过期时主动清理定时器：

import { useEffect, useRef, useState } from 'react';
import AuthService from './includes/AuthService';
import LoginDialog from './LoginDialog'; // 替换成你的登录弹窗组件

function App() {
  const [openLoginDialog, setOpenLoginDialog] = useState(false);
  const timerRef = useRef(null); // 用useRef保存定时器ID，避免重新渲染丢失

  // 令牌过期检测逻辑
  const checkTokenExpiration = () => {
    const tokenExpired = AuthService.isTokenExpired(); // 假设AuthService提供该方法
    if (tokenExpired) {
      setOpenLoginDialog(true);
      // 令牌过期后立刻清除定时器，避免重复触发
      if (timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
    }
  };

  useEffect(() => {
    // 启动定时检测，这里设为每5秒检测一次，可按需调整
    timerRef.current = setInterval(checkTokenExpiration, 5000);

    // 组件卸载时自动清理定时器（useEffect的返回函数是清理逻辑）
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  // 登录成功后的回调：关闭弹窗并重启定时器
  const handleLoginSuccess = () => {
    setOpenLoginDialog(false);
    if (!timerRef.current) {
      timerRef.current = setInterval(checkTokenExpiration, 5000);
    }
  };

  return (
    <div className="App">
      {/* 你的其他业务组件 */}
      <LoginDialog 
        open={openLoginDialog} 
        onLoginSuccess={handleLoginSuccess} 
      />
    </div>
  );
}

export default App;

解决方案：类组件版本 #

如果你的App是类组件，用实例变量保存定时器ID，在componentDidMount启动定时器，componentWillUnmount清理：

import React, { Component } from 'react';
import AuthService from './includes/AuthService';
import LoginDialog from './LoginDialog';

class App extends Component {
  state = {
    openLoginDialog: false
  };

  timerId = null; // 用实例变量保存定时器ID

  checkTokenExpiration = () => {
    const tokenExpired = AuthService.isTokenExpired();
    if (tokenExpired) {
      this.setState({ openLoginDialog: true });
      // 主动清除定时器
      if (this.timerId) {
        clearInterval(this.timerId);
        this.timerId = null;
      }
    }
  };

  componentDidMount() {
    // 启动定时检测
    this.timerId = setInterval(this.checkTokenExpiration, 5000);
  }

  componentWillUnmount() {
    // 组件卸载时强制清理定时器
    if (this.timerId) {
      clearInterval(this.timerId);
    }
  }

  handleLoginSuccess = () => {
    this.setState({ openLoginDialog: false });
    // 登录成功后重启定时器
    if (!this.timerId) {
      this.timerId = setInterval(this.checkTokenExpiration, 5000);
    }
  };

  render() {
    return (
      <div className="App">
        {/* 你的其他业务组件 */}
        <LoginDialog 
          open={this.state.openLoginDialog} 
          onLoginSuccess={this.handleLoginSuccess} 
        />
      </div>
    );
  }
}

export default App;

关键注意点 #

• 必须保存定时器ID：不能直接调用setInterval(checkToken, 5000)后就不管了，否则后续无法清除它
• 组件卸载时一定要清理定时器：这是消除警告的核心，避免无效的setState调用
• 令牌过期后主动清除定时器：防止定时器继续触发检测逻辑，造成不必要的性能消耗
• 登录成功后重启定时器：确保用户重新登录后，继续执行令牌过期检测

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