时间戳

首页 > 解决方案 > 用反应创建计时器

reactjs - 用反应创建计时器

问题描述

我想要一个倒数计时器，当程序阶段达到两个时，它从 60 计数到零。这是我的代码：

const [timer, setTimer] = useState(60)
useEffect(() => {
        if (stage === 2) {
            const interval = setInterval(() => {
                console.log(timer)
                setTimer(timer - 1)
                if (timer === 1) {
                    clearInterval(interval)
                }
            }, 1000)
        }
    }, [stage])

我有一个像下面这样的 div 只显示计数器值

<div>{timer}</div>

在我的 setInterval 中，当我使用console.log(timer)它时，它总是打印出 60。但在 div 内部，该值以 60 开头，下一秒将始终为 59。我在这里做错了什么？

标签： reactjsreact-hooks

解决方案

您关闭了time === 60价值，请改用功能更新。

出于同样的原因，您应该有另一个useEffect用于取消间隔：

const intervalId = useRef();

useEffect(() => {
  if (stage === 2) {
    intervalId.current = setInterval(() => {
      setTimer((prevTimer) => prevTimer - 1);
    }, 1000);
  }
}, [stage]);

useEffect(() => {
  console.log(timer);
  if (timer === 1) {
    clearInterval(intervalId.current);
  }
}, [timer]);

检查类似的问题：setIntervalcounter common errors。

推荐阅读