无法让 React 倒数计时器停止

Question

我是 React 的新手，但我发现并修改了一个倒数计时器以达到我的目的。但是，我不知道如何让计时器停止。我只希望输出在完成时显示为“0:00”。

所以我没有包括设置时间量的组件的开头，但这是其余部分：

  const timeBetween = targetTime - currentTime;
  const seconds = Math.floor((timeBetween / 1000) % 60);
  const minutes = Math.floor((timeBetween / 1000 / 60) % 60);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(Date.now());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <div className="content2">
        <p style={{ color: "white" }}>We start in:</p>
        <p style={{ color: "white" }}>
          <span>{`${minutes}:${seconds < 10 ? "0" : ""}${seconds}`}</span>
        </p>
      </div>
    </>
  );

Answer 1

你走对了，你只需要在你之前添加一个检查条件setCurrentTime

只检查targetTime是否已经超过当前时间，如果超过则移除间隔

const interval = setInterval(() => {
  if (targetTime > new Date()) {
    setCurrentTime(Date.now());
  } else {
    clearInterval(interval);
  }
}, 1000);

这是一个有效的stakblitz example

无法让 React 倒数计时器停止

Trouble getting React countdown timer to stop

timer

reactjs