咨询：如何根据模态框布尔状态重置定时器及计数

安全阿岳

2026-8-20

解决方案

当然可以实现你要的效果，但当前代码里的定时器变量timer是在if (modal)分支内部定义的，在!modal分支里访问不到，直接写清除逻辑会报错。调整写法就能解决：

核心思路

用useRef存储定时器引用，确保不同useEffect触发周期里能拿到同一个定时器实例
模态框显示时启动定时器，计数到10时自动停止
模态框关闭时立即清除定时器并重置计数
增加清理函数，避免组件卸载时残留定时器导致内存泄漏

修改后的完整代码

import { useEffect, useState, useRef } from 'react';

function YourModalComponent() {
  const [modal, setModal] = useState(false);
  const [count, setCount] = useState(0);
  const timerRef = useRef(null); // 用ref持久化定时器引用

  useEffect(() => {
    if (modal) {
      // 每次打开模态框先重置计数（按需保留）
      setCount(0);
      timerRef.current = setInterval(() => {
        setCount(prevCount => {
          if (prevCount >= 9) {
            clearInterval(timerRef.current);
            return 10;
          }
          return prevCount + 1;
        });
      }, 1000);
    } else {
      // 关闭模态框时清除定时器+重置计数
      if (timerRef.current) {
        clearInterval(timerRef.current);
        timerRef.current = null;
      }
      setCount(0);
    }

    // 组件卸载/modal状态变更时的清理逻辑
    return () => {
      if (timerRef.current) {
        clearInterval(timerRef.current);
      }
    };
  }, [modal]);

  // 组件其他逻辑与JSX...
  return (
    <div>
      {/* 模态框与控制按钮 */}
    </div>
  );
}