反应钩子不起作用

Question

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

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，尽管我已经将它设置为初始值。感谢您的任何建议！

Answer 1

问题

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

解决方案

使用功能状态更新从前一个状态而不是更新入队的状态进行更新。

setTimer(timer => timer - 1)