时间戳

首页 > 解决方案 > 反应钩子不起作用

javascript - 反应钩子不起作用

问题描述

所以我在反应函数组件中得到了这个方法

let req = () => {
    setLoading('fas fa-spinner fa-pulse fa-spinner')
    setQuestion('')
    setAnswer('')
    setTimer(2)     //set i here
    setChoices([])
    setDisplay('none')
    setdisplayTimer('none')
    fetch('https://opentdb.com/api.php?amount=1&category=9&type=boolean')
        .then((res) => res.json())
        .then(data => {
            console.log(data.results[0])
            let interval = setInterval(() => {
                setdisplayTimer('block')
                setTimer(timer--)     //substract i here
                if (timer < 0) {
                    clearInterval(interval)
                    setDisplay('block')
                }
            }, 1000);
            console.log(timer)
            setLoading('')
            setAnswer(data.results[0].correct_answer)
            setQuestion((data.results[0].question).replace(/&quot;/g, '"').replace(/&#039;s/g, "'s").replace(/&#34;/g, '"').replace(/&#039;t/, "'t").replace(/&#039;/, "'"))
            setChoices(['True', 'False'])
        })
}

以前我也声明过const [timer, setTimer] = useState(4)

问题是当我第二次调用该方法时，我的钩子setTimer仍然为 0，尽管我已经将它设置为初始值。谢谢你的任何建议！

标签： javascriptreactjs

解决方案

问题

您在间隔回调中有一个陈旧的timer状态外壳。可能初始状态timer: 0是封闭的，并且setTimer(2)对以后timer的值访问没有影响，因为它们使用了封闭的初始状态值。

解决方案

使用功能状态更新从先前的状态而不是更新排队的状态进行更新。

setTimer(timer => timer - 1)

推荐阅读