React Native Countdown with pause函数

Question

从一个教程开始，我正在尝试制作自己的倒计时计时器，并且我想添加一个暂停功能。它使用moment.js

const [time, setTime] = useState({

    eventDate: moment.duration('00:00:06'),
    days: 0,
    hours: 0,
    mins: 0,
    secs: 0,
  });

const updateTimer = () => {
    const x = setInterval(() => {
      let {eventDate} = time;


      if (eventDate <= 0) {
        clearInterval(x);

      } else {
        eventDate = eventDate.subtract(1, 's');
        const days = eventDate.days();
        const hours = eventDate.hours();
        const mins = eventDate.minutes();
        const secs = eventDate.seconds();

        setTime({
          days,
          hours,
          mins,
          secs,
          eventDate,
        });
      }
    }, 1000);
  };

改变暂停状态的简单按钮，这是有效的

const handlePause = () => {
    {
      !pause ? setPause(true) : setPause(false);
    }
  };

但不是停止useEffect

  useEffect(() => {
    if (pause) {
      return;
    } else {
      updateTimer();
    }
  }, []);

也许所有的事情都是错的，但我没有其他想法去做。建议？谢谢!

Answer 1

找到了！我添加了

 const [intervalTime, setIntervalTime] = useState();

我在函数的末尾设置了它

const updateTimer = () => {
    const x = setInterval(() => {
      let {eventDate} = time;

      if (eventDate <= 0) {
        clearInterval(x);

      } else {
        eventDate = eventDate.subtract(1, 's');
        const days = eventDate.days();
        const hours = eventDate.hours();
        const mins = eventDate.minutes();
        const secs = eventDate.seconds();

        setTime({
          days,
          hours,
          mins,
          secs,
          eventDate,
        });
      }
    }, 1000);
    console.log('interval', x);

    setIntervalTime(x); // set state

    };

然后我在handlePause中使用clearInterval

  const handlePause = () => {
    {
      !pause ? setPause(true) : setPause(false);
    }
    clearInterval(intervalTime);
  };

刚添加的暂停有依赖关系

  useEffect(() => {
    if (!pause) {
      return;
    } else if (pause) {
      updateTimer();
    }
  }, [pause]);