React中如何使用setInterval修改state变量实现登录后倒计时功能？

• 你在setSecondsLeft的函数式更新回调中没有使用传入的最新状态参数prev，反而使用了外部被闭包捕获的旧secondsLeft值，这个值在回调定义时就固定为初始的0，不会随状态更新变化
• console.log(secondsLeft)打印的同样是闭包捕获的旧值，所以你会一直看到输出0
• 定时器没有做清除逻辑，多次触发登录会生成多个并行定时器，导致计数异常
• 你在setCurrentUser后直接读取currentUser.firstName也会拿到旧值，因为React状态更新是异步的

import { useState, useRef, useEffect } from 'react';

// 组件内代码
const [secondsLeft, setSecondsLeft] = useState(0);
// 存储定时器id，方便清除
const timerRef = useRef(null);

// 组件卸载时清除定时器，避免内存泄漏
useEffect(() => {
  return () => {
    if (timerRef.current) clearInterval(timerRef.current);
  };
}, []);

const handleButton = async () => {
    const response = await fetch('http://localhost:5001/login', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ username, password })
    });
    setUsername('');
    setPassword('');
    if (response.ok) {
        const data = await response.json();
        setCurrentUser(prev => ({ ...prev, ...data.user }));
        // 直接用返回的data取值，不要取刚更新完的currentUser
        setMessage(`User: ${data.user.firstName}`);
        setSecondsLeft(8);
        // 如果需要首次打印初始值8，可在这里加一行 console.log(8)
        // 先清除之前可能存在的定时器，避免多个同时运行
        if (timerRef.current) clearInterval(timerRef.current);
        timerRef.current = setInterval(() => {
            setSecondsLeft(prev => {
                const nextValue = prev - 1;
                // 在更新回调里打印最新值，或者单独在useEffect里监听secondsLeft打印
                console.log(nextValue);
                // 倒计时到0时自动清除定时器
                if (nextValue <= 0) {
                    clearInterval(timerRef.current);
                    timerRef.current = null;
                }
                return nextValue;
            });
        }, 1000);
    } else {
        setMessage('bad login');
    }
}

• 用useRef存储定时器id，方便随时清除旧定时器和组件卸载时清理
• 函数式更新时直接使用prev参数拿到最新的秒数，避免闭包问题
• 倒计时到0时自动停止定时器，避免无效计数
• 修复了获取用户名时读取旧状态的问题

内容的提问来源于stack exchange，提问作者Edward Tanguay