React组件报错：Rendered more hooks than during the previous render 求助

出现"Rendered more hooks than during the previous render"错误的核心原因是组件顶层直接执行副作用逻辑（定时器创建、事件监听绑定），导致每次组件渲染都会重复执行这些操作，引发不必要的重渲染和状态更新，破坏了React Hook的调用规则。即使移除useTranslation能暂时运行，也只是掩盖了内存泄漏和重复执行的问题。

具体问题点： #

• 直接在组件顶层调用setInterval，每次渲染都会创建新的定时器，旧定时器未及时清理，导致内存泄漏和重复触发状态更新。
• 直接在组件顶层绑定window.addEventListener('error')，每次渲染都会添加新的事件监听，同一错误会被多次处理，引发频繁重渲染。

修复后的代码： #

import { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';

export const TokenExpiration = () => {
    // 所有Hook保持在组件最顶层，顺序固定
    const { t } = useTranslation();
    const [openDiscardModal, setOpenDiscardModal] = useState(false);
    const [isLoading, setIsLoading] = useState(false);

    const redirectToLogin = () => {
        setIsLoading(true);
        window.location.href = '/login';
    };

    const showPopupTokenExpired = (event) => {
        if (event && event.message.includes('Invalid token specified')) {
            Notification.showError(event.message);
            redirectToLogin();
            return;
        }
        if (isTokenExpired() && window.location.pathname !== '/login') {
            setOpenDiscardModal(true);
        }
    };

    useEffect(() => {
        // 创建定时器，仅在组件挂载时执行一次
        const intervalId = setInterval(() => {
            showPopupTokenExpired();
        }, 1000);

        // 绑定error事件监听
        const handleWindowError = (event) => {
            showPopupTokenExpired(event);
        };
        window.addEventListener('error', handleWindowError);

        // 组件卸载时清理定时器和事件监听
        return () => {
            clearInterval(intervalId);
            window.removeEventListener('error', handleWindowError);
        };
    }, []); // 空依赖数组，确保仅执行一次

    // 可选：使用t函数实现国际化文本
    const discardModal = {
        buttonCount: 1,
        buttonStyles: [
            { background: '#474747', color: 'white', border: 'none', margin: '5px' },
        ],
        buttonTexts: [t('backToLogin')], // 替换为你的国际化key
        buttonActions: [() => redirectToLogin()],
        alertText: t('tokenExpired'),
        alertMessage: t('tokenExpiredMessage'),
        buttonIcons: [
            isLoading ? (
                <Spinner animation="border" role="status" size="sm" key="spinner" />
            ) : null,
        ],
    };

    return (
        <ConfirMationModal
            openConfirmationModal={openDiscardModal}
            setOpenConfirmationModal={setOpenDiscardModal}
            popupParams={discardModal}
        />
    );
};

关键修复说明： #

• 将定时器和事件监听的逻辑全部移入useEffect，并通过空依赖数组确保仅在组件挂载时执行一次，避免重复创建和绑定。
• 在useEffect的清理函数中移除定时器和事件监听，防止内存泄漏。
• 保持所有Hook在组件最顶层调用，确保每次渲染时Hook的调用顺序完全一致，符合React的Hook规则。
• 补全了useTranslation的使用（如果不需要国际化，也可以保留原文本，但Hook的调用位置必须正确）。

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