Javascript 不能停止间隔

我有一个状态，用setTimeout每秒更新一次时间，但不能用ClearTimeout清除它。当我打印timerClear值时，它会显示不同的值

var timerClear ;

const [MyTime, setMyTime] = useState('');

useEffect(() => {
  timerClear = setInterval(() => {
     setMyTime(
       realeTime.toLocaleTimeString([], {
       timeZone: "Asia/Tehran",
       hour: '2-digit',
       minute: '2-digit',
       second: '2-digit',
       hour12: false,
       }),
     );

     checkTime();

  }, 1000);
}, [MyTime]);

在检查功能中，如果时间达到所需值，我将清除所有计时器

if (filterGetTime > filterEndTime) {
   if (data.examParents[0].examParent_method == "0") { 
      console.log('timerClear',timerClear);
                    
      alert('زمان امتحان تمام شده است!!!');
      if(sendReqDelay){
         clearTimeout(sendReqDelay);
      }
      clearTimeout(setTimeToPageTimeOut);
      clearTimeout(TimerIntervalSolveQuestions);
      clearInterval(timerClear);
   } 
             
}

每次确认按钮处于警报状态后

alert('زمان امتحان تمام شده است!!!');

---

打印另一个数字。

由于依赖关系数组

[MyTime]

每次

MyTime

更改时，您都会创建一个新的间隔，而对旧间隔的引用将丢失。有了这样的设置，您最好使用

setTimeout

另外，由于您有一个普通变量，因此每次重新渲染时都会重新声明该变量。
如果要使用

setInterval

，则应该使用

useRef

来保留对它的引用，并从依赖项数组中删除

MyTime

---

大致如下：

const timerClear = useRef() ;
const [myTime, setMyTime] = useState('');

useEffect(() => {
  timerClear.current = setInterval(() => {
     setMyTime(
        // ...
     );
  }, 1000);
  return () => clearInterval(timeClear.current);
}, []);

---

您是否尝试过创建自定义挂钩？每次

MyTime

更改时，您都在创建一个新的间隔并覆盖

timerClear

。

const timerClear = useRef() ;
const [myTime, setMyTime] = useState('');

useEffect(() => {
  timerClear.current = setInterval(() => {
     setMyTime(
        // ...
     );
  }, 1000);
  return () => clearInterval(timeClear.current);
}, []);