React Hooks 调用失效：setTimer二次调用后值仍为0的问题

你遇到的第二次调用req时timer值不对的问题，是React Hooks的3个典型错误叠加导致的：

• 直接读取闭包里的状态快照值做计算，没有用React的状态更新机制同步真实值
• 没有统一管理定时器实例，上一次残留的游离定时器会持续干扰当前的状态
• 状态更新是异步的，在定时器回调里无法直接读到刚设置的最新timer值

• 引入useRef存储定时器实例：ref的修改不会触发组件重渲染，非常适合存放定时器这类和渲染逻辑无关的实例，每次调用req时先清理上一次的定时器，避免多个定时器并行运行
• 所有timer更新改用函数式更新：不要再直接读取闭包里的timer变量做计算，通过setTimer(prevValue => ...)的形式，拿到React维护的真实最新状态值来计算，从根本上避免闭包导致的旧值问题
• 把timer的终止判断逻辑放到状态更新的回调里：只有在函数式更新的回调里能拿到最新的状态值，在这里判断timer是否到阈值、清理定时器、切换显示状态，逻辑才是准确的

// 组件顶部新增定时器实例的ref存储
const timerRef = useRef(null)
// 你原有的状态声明
const [timer, setTimer] = useState(4)

const req = () => {
    // 每次触发请求先清理残留的旧定时器
    if (timerRef.current) {
        clearInterval(timerRef.current)
        timerRef.current = null
    }
    setLoading('fas fa-spinner fa-pulse fa-spinner')
    setQuestion('')
    setAnswer('')
    setTimer(2)
    setChoices([])
    setDisplay('none')
    setdisplayTimer('none')

    fetch('https://opentdb.com/api.php?amount=1&category=9&type=boolean')
        .then(res => res.json())
        .then(data => {
            const targetQuestion = data.results[0].question
                .replace(/"/g, '"')
                .replace(/'s/g, "'s")
                .replace(/"/g, '"')
                .replace(/'t/, "'t")
                .replace(/'/g, "'")
            
            setLoading('')
            setAnswer(data.results[0].correct_answer)
            setQuestion(targetQuestion)
            setChoices(['True', 'False'])

            // 启动倒计时
            setdisplayTimer('block')
            timerRef.current = setInterval(() => {
                // 用函数式更新获取真实的最新timer值，避免闭包旧值问题
                setTimer(prev => {
                    const nextTimerVal = prev - 1
                    // 倒计时到负数时清理定时器，显示答题区域
                    if (nextTimerVal < 0) {
                        clearInterval(timerRef.current)
                        timerRef.current = null
                        setDisplay('block')
                    }
                    return nextTimerVal
                })
            }, 1000)
        })
        .catch(err => {
            // 补充错误处理，避免请求失败时状态卡住
            setLoading('')
            console.error('请求题库接口失败', err)
        })
}

• 原代码里的setTimer(timer--)操作，本质是读取组件渲染时闭包捕获的旧timer值，先把这个旧值传给setTimer，再把局部的timer变量做自减，这个自减操作根本不会同步到React的状态存储里，导致状态值和你预期的逻辑完全脱节
• 第一次执行req时创建的interval如果没有被正确清理，会作为游离的后台任务持续运行，哪怕你第二次调用req时写了setTimer(2)，旧的interval每秒还在执行旧的逻辑，很快就把timer值打到0甚至负数
• 因为闭包捕获的特性，原代码的interval回调里拿到的timer值，永远是创建interval那一刻的组件快照，不会随着你后续的setTimer(2)更新而变化，永远读不到你新设置的初始值2

内容的提问来源于stack exchange，提问作者Tulus Ibrahim