ReactJS 5分钟倒计时计时器异常问题求助

问题描述 #

实现了从05:00倒计时到00:00的计时器，同时有一个正常运行的60秒倒计时器，但5分钟计时器出现异常：从05:59跳到05:00，再到04:00，之后变为04:59。

问题排查 #

1. 多个独立定时器冲突：三个useEffect分别维护不同定时器，分钟和秒的状态更新不同步，导致数值乱跳。
2. 无效条件判断：第三个useEffect中if (minutes !== 1 && minutes !== 5)的逻辑毫无依据，导致特定分钟值下无法正常递减分钟数。
3. 状态依赖缺失：第二个useEffect的依赖数组为空，内部引用的minutes始终是初始值5，导致if(minutes===0)永远不会触发，定时器无法停止。
4. 重复修改分钟状态：第二个useEffect每分钟强制减1分钟，同时第三个useEffect在秒归零时也会修改分钟，造成重复更新。

修复方案 #

将5分钟倒计时的逻辑合并到一个定时器中，统一处理秒和分钟的递减逻辑，避免多个定时器冲突：

• 每秒更新一次秒数，当秒数小于0时，重置为59并递减分钟数。
• 当分钟数和秒数都为0时，停止定时器。
• 使用函数式更新获取最新状态，确保状态更新的准确性。

完整修复代码 #

import { useState, useEffect } from 'react';

function TimerComponent() {
    const [timer, setTimer] = useState(60);
    const [minutes, setMinutes] = useState(5);
    const [seconds, setSeconds] = useState(0);
    const [disable, setDisable] = useState(true);

    // 60秒倒计时逻辑（保留原正常逻辑）
    useEffect(() => {
        const interval = setInterval(() => {
            setTimer((prevTimer) => {
                if (prevTimer <= 1) {
                    clearInterval(interval);
                    setDisable(false);
                }
                return prevTimer - 1;
            });
        }, 1000);

        return () => clearInterval(interval);
    }, [disable]);

    // 修复后的5分钟倒计时逻辑
    useEffect(() => {
        const countDownInterval = setInterval(() => {
            setSeconds((prevSeconds) => {
                if (prevSeconds === 0) {
                    // 秒归零时，触发分钟递减并重置秒数
                    setMinutes((prevMinutes) => {
                        if (prevMinutes === 0) {
                            clearInterval(countDownInterval);
                            return 0;
                        }
                        return prevMinutes - 1;
                    });
                    return 59;
                }
                return prevSeconds - 1;
            });
        }, 1000);

        return () => clearInterval(countDownInterval);
    }, []);

    // 格式化显示，补零确保两位数格式
    const formatTime = (num) => num.toString().padStart(2, '0');

    return (
        <div>
            <p>60秒倒计时: {formatTime(timer)}</p>
            <p>5分钟倒计时: {formatTime(minutes)}:{formatTime(seconds)}</p>
            <button disabled={disable}>操作按钮</button>
        </div>
    );
}

export default TimerComponent;

关键修复点说明 #

• 合并定时器：用一个每秒触发的定时器统一处理秒和分钟的更新，确保状态同步。
• 移除无效判断：删除了if (minutes !== 1 && minutes !== 5)这种错误逻辑。
• 优化状态更新顺序：先处理秒数的变化，再根据秒数的状态触发分钟的更新，避免重复修改。
• 补零格式化：新增formatTime函数，让时间显示保持两位数格式（如05:00而非5:0）。

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