clearInterval() 无法停止在计时器上运行的间隔

Question

第一次使用 clearInterval() 查看其他示例和间隔文档，这似乎是停止间隔的方法。不知道我错过了什么。

目的是在 currentStop 道具更新时终止计时器。

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

type Props = {
  stopNumber: number;
  currentStop: number;
};

const timerComponent = ({ stopNumber, currentStop }: Props) => {
  let interval: NodeJS.Timer;

  // Update elapsed on a timer
  useEffect(() => {
    if (stopNumber === currentStop) {
      interval = setInterval(() => {
        console.log('timer is running');
      }, 3000);

      // Clear interval on unmount
      return () => clearInterval(interval);
    }
  }, []);

  // Clear timers that were running
  useEffect(() => {
    if (stopNumber !== currentStop) {
      clearInterval(interval);
    }
  }, [currentStop]);
};

Answer 1

将 intervalId 存储在 ref 上

const timerComponent = ({ stopNumber, currentStop }: Props) => {
  const intervalRef = useRef({
    intervalId: 0
  })

  // Update elapsed on a timer
  useEffect(() => {
    if (stopNumber === currentStop) {
      intervalRef.current.intervalId = setInterval(() => {
        console.log('timer is running');
      }, 3000);

      // Clear interval on unmount
      return () => clearInterval(intervalRef.current.intervalId);
    }
  }, []);

  // Clear timers that were running
  useEffect(() => {
    if (stopNumber !== currentStop) {
      clearInterval(intervalRef.current.intervalId);
    }
  }, [currentStop]);
};

Answer 2

使用 ref 来存储间隔 id。

let interval = useRef();
// to start the setInterval:
interval.current = setInterval(...);
// to stop the setInterval:
clearInterval(interval.current);