ReactJS

Question

我正在尝试在 React 中创建一个计时器应用程序。该应用程序通过在用户单击按钮时调用 setInterval 计时器来工作。

const [timer, setTimer] = useState(1500)    // 25 minutes
const [start, setStart] = useState(false)

const onClick = () => {
    if (!start) {
        var tick = setInterval(() => {
            setStart(true)
            if (timer < 0) {
                clearInterval(tick)
            }
            setTimer(timer => timer - 1)
            console.log(timer)
            
        }, 1000)
    }
}

即使计时器每秒都在减少，console.log(timer) 仍然会打印出 1500 而不会减少。此后我无法停止计时器。

Answer 1

set 函数是异步的，所以 console.log 还没有新值。

将日志放入函数中 setTimer:

...
setTimer(timer => {
    console.log(timer - 1)
    return timer - 1;
})
...

ReactJS - 使用 setInterval 减少计时器

ReactJS - Using setInterval for decreasing timer

javascript

timer

use-state