时间戳

首页 > 解决方案 > 重复调用时仅更改一次状态

javascript - 重复调用时仅更改一次状态

问题描述

我正在尝试增加计时器间隔，以便它开始快速，然后逐渐变慢。我已经声明了状态和一个在达到时间间隔时调用的函数。TimeInterval 状态应该增加到 4，然后下次调用 8、16、32 等。但由于某种原因，它只被调用一次并且会卡在 4 上。RandomNumberGenerator() 和 RandomColorGenerator() 不断更新。知道为什么 TimeInterval 会卡在 4 上吗？

    const [TimeInterval, setTimeInterval] = useState(2)


const NextSelection = () => {
        setTimeInterval(TimeInterval * 2)
        RandomNumberGenerator()
        RandomColorGenerator()
    }

标签： javascriptreactjsreact-nativestate

解决方案

useState钩子更新是一个异步操作。尽管这不是这里的主要问题，但钩子持有的值是在调用函数时它被关闭的值。当新值依赖于以前的值时，最好使用 setter 函数，因为每次渲染都会对变量形成一个闭包

setTimeInterval(TimeInterval * 2)

到

setTimeInterval(latestTimeInterval => latestTimeInterval * 2)

推荐阅读