React计时器调用play函数后useEffect未触发问题求助

问题描述 #

我正在开发一款可在工作时段与休息时段间切换的倒计时计时器，目前遇到问题：调用play等函数后，useEffect钩子不再重新执行。根据调研，调用React的set类钩子后useEffect应触发，但本项目中并未出现该情况。相关代码如下：

import React,{useEffect,useState} from "react";
import 'bootstrap/dist/css/bootstrap.css'; 

let Timer=()=>{
    let [min,setMin]=useState("00");
    let [hour,setHour]=useState("00");
    let [playIcon,setPlayIcon]=useState("btn btn-primary btn-lg rounded-circle ");
    let [stopIcon,setStopIcon]=useState("btn  btn-danger btn-lg rounded-circle ");
    let [editIcon,setEditIcon]=useState("btn btn-success  btn-lg rounded-circle ");
    let [play,setPlay]=useState(false);
    let [edit,setEdit]=useState(true);
    let [stop,setStop]=useState(false);
    let [isVisible,setIsVisible]=useState("d-block");
    let [minutes,setMinutes]=useState(0);
    let [breakTime,setBreakTime]=useState(0);
    let [seconds,setSeconds]=useState(0);
    let [isWork,setIsWork]=useState(true);
    let[focusTime,setFocusTime]=useState(-1);
    let [isPause,setIsPause]=useState(true);
    let [secondSpare,setSecondSpare]=useState(0);

    useEffect(() => {
        const interval = setInterval(() => {
            //doesnt update incremently.    
            setSeconds((seconds)=>{return seconds+1;});
            if(!edit&&!isPause){
                console.log('hi');
                if((seconds/60)===focusTime){
                    setEdit((edit)=>{return true;});
                    setIsWork((isWork)=>{return !isWork;})
                    if(isWork){
                        setFocusTime((focusTime)=>{return breakTime});
                        alert('worktime');
                    }
                    else{
                        setFocusTime((focusTime)=>{return minutes});
                        alert('breaktime');
                    }
                    setSeconds((seconds)=>{return 0;});
                    //set clock;
                    let newTime=focusTime;
                    let newHours=Math.trunc(newTime/60);
                    let newMinutes=newTime%60;
                    setMin((min)=>{return toString(newMinutes)});
                    setHour((hour)=>{return toString(newHours);});
                }
                adjustTime();        
            }
        }, 1000);
        return () => clearInterval(interval);
    },[]);

    let adjustTime=()=>{
        let minutesDown=Math.trunc((seconds/60));
        let adjustedTime=(focusTime)-minutesDown;
        let newHours=Math.trunc(adjustTime/60);
        let newMinutes=adjustTime%60;
        setMin(toString(newMinutes));
        setHour(toString(newHours));
    }

    let playF=()=>{
        if(play==false){
            setPlay(true);
            setEdit(false);
            setStop(false);
            //to switch to pause.
            /**first pause becomes false. set seconds */              
            setIsPause(false);
            setSeconds(secondSpare);
            setSecondSpare( 0);
        }
    }

    let editF=()=>{
        if(edit==false)
        {
            setPlay(false);
            setEdit(true);
            if(!edit){
                setIsVisible("d-block");
            }
            else{
                setIsVisible("d-none");
            }
            setStop(false);
            //to switch to pause.
            /**pause turns to tru.seconds is set to zero.spare takes seconds */
            if(stop==false){
                setIsPause(true);
                setSecondSpare( seconds);
                setSeconds(0);
            }
        }
    }

    let stopF=()=>{
        if(stop==false){
            setPlay(false);
            setStop(true);
            //to switch to pause.
            /**pause turns to tru.seconds is set to zero.spare takes seconds */        
            if(edit==false){
                setIsPause(true);
                setSecondSpare(seconds);
                setSeconds(0);
            }
        }
    }

    return(
        <div>
            <div className={isVisible}>
                <h1>Countdown Timer</h1>
                <input type="number"  id="target" min="1" value={minutes} onChange={(e)=>{setMinutes((minutes)=>{return e.target.value;})}} />
                <label htmlFor="target">:time in minutes</label>
                <div><hr /></div>
                <input type="number"   id="breakTarget" min="1" value={breakTime} onChange={(e)=>{setBreakTime((breakTime)=>{return e.target.value;})}} />
                <label htmlFor="breakTarget">:break time in minutes</label>
            </div>
            <div>{hour}:{min}</div>
            <div className="d-flex justify-content-between">
                <button onClick={playF} className={playIcon} >start</button>
                <button onClick={editF} className={editIcon} >edit</button>
                <button onClick={stopF} className={stopIcon}>stop</button>
            </div>
        </div>
    ); 
} 

export default Timer;

核心问题分析 #

1. useEffect依赖数组为空：你的useEffect第二个参数是[]，这意味着它只会在组件首次挂载时执行一次，后续无论任何state变化都不会重新触发。你误以为调用set类钩子就会触发useEffect，但实际上只有当依赖数组中的变量发生变化时，useEffect才会重新执行。
2. 闭包捕获旧state值：interval内部的代码捕获的是组件挂载时的state初始值（比如seconds、edit等），即使调用set函数更新了state，interval里的变量还是旧值，导致逻辑判断失效。
3. 时间显示格式错误：toString(newMinutes)写法错误，应该是newMinutes.toString()，且没有补零处理，导致单分钟/小时显示为1而不是01。

解决方案 #

1. 修正useEffect依赖并优化interval管理 #

使用useRef保存interval引用，同时将useEffect的依赖设置为控制计时器启停的核心state（比如edit、isPause），确保状态变化时能重启interval：

import React,{useEffect,useState,useRef} from "react";
import 'bootstrap/dist/css/bootstrap.css'; 

const Timer=()=>{
    let [min,setMin]=useState("00");
    let [hour,setHour]=useState("00");
    let [playIcon,setPlayIcon]=useState("btn btn-primary btn-lg rounded-circle ");
    let [stopIcon,setStopIcon]=useState("btn  btn-danger btn-lg rounded-circle ");
    let [editIcon,setEditIcon]=useState("btn btn-success  btn-lg rounded-circle ");
    let [play,setPlay]=useState(false);
    let [edit,setEdit]=useState(true);
    let [stop,setStop]=useState(false);
    let [isVisible,setIsVisible]=useState("d-block");
    let [minutes,setMinutes]=useState(0);
    let [breakTime,setBreakTime]=useState(0);
    let [seconds,setSeconds]=useState(0);
    let [isWork,setIsWork]=useState(true);
    let[focusTime,setFocusTime]=useState(-1);
    let [isPause,setIsPause]=useState(true);
    let [secondSpare,setSecondSpare]=useState(0);

    // 用ref保存最新的state值，避免闭包问题
    const stateRef = useRef({
        seconds,
        edit,
        isPause,
        focusTime,
        isWork,
        breakTime,
        minutes
    });

    // 同步state到ref
    useEffect(() => {
        stateRef.current = {
            seconds,
            edit,
            isPause,
            focusTime,
            isWork,
            breakTime,
            minutes
        };
    }, [seconds, edit, isPause, focusTime, isWork, breakTime, minutes]);

    const intervalRef = useRef(null);

    useEffect(() => {
        // 清理旧的interval
        if (intervalRef.current) {
            clearInterval(intervalRef.current);
        }

        // 只有在非编辑、非暂停状态下才启动计时器
        if (!edit && !isPause) {
            intervalRef.current = setInterval(() => {
                const currentState = stateRef.current;
                setSeconds(prev => prev + 1);
                
                // 计算已过去的分钟数
                const elapsedMinutes = Math.floor((currentState.seconds + 1) / 60);
                if (elapsedMinutes === currentState.focusTime) {
                    setEdit(true);
                    setIsWork(prev => !prev);
                    setSeconds(0);
                    
                    // 更新焦点时间
                    const newFocusTime = currentState.isWork ? currentState.breakTime : currentState.minutes;
                    setFocusTime(newFocusTime);
                    
                    // 更新显示时间（补零）
                    const newHours = Math.trunc(newFocusTime / 60).toString().padStart(2, '0');
                    const newMinutes = (newFocusTime % 60).toString().padStart(2, '0');
                    setMin(newMinutes);
                    setHour(newHours);
                    
                    alert(currentState.isWork ? '工作时间结束，休息时间开始！' : '休息时间结束，工作时间开始！');
                }
                adjustTime();
            }, 1000);
        }

        return () => {
            if (intervalRef.current) {
                clearInterval(intervalRef.current);
            }
        };
    }, [edit, isPause]); // 依赖编辑和暂停状态，状态变化时重启计时器

    let adjustTime=()=>{
        const currentState = stateRef.current;
        const minutesDown=Math.trunc(currentState.seconds/60);
        const adjustedTime=currentState.focusTime - minutesDown;
        const newHours=Math.trunc(adjustedTime/60).toString().padStart(2, '0');
        const newMinutes=(adjustedTime%60).toString().padStart(2, '0');
        setMin(newMinutes);
        setHour(newHours);
    }

    // 初始化focusTime
    useEffect(() => {
        if (minutes > 0 && focusTime === -1) {
            setFocusTime(minutes);
            const newHours = Math.trunc(minutes / 60).toString().padStart(2, '0');
            const newMinutes = (minutes % 60).toString().padStart(2, '0');
            setMin(newMinutes);
            setHour(newHours);
        }
    }, [minutes, focusTime]);

    let playF=()=>{
        if(!play){
            setPlay(true);
            setEdit(false);
            setStop(false);
            setIsPause(false);
            setSeconds(secondSpare);
            setSecondSpare(0);
        }
    }

    let editF=()=>{
        if(!edit){
            setPlay(false);
            setEdit(true);
            setIsVisible("d-block");
            setStop(false);
            setIsPause(true);
            setSecondSpare(seconds);
            setSeconds(0);
        }
    }

    let stopF=()=>{
        if(!stop){
            setPlay(false);
            setStop(true);
            if(!edit){
                setIsPause(true);
                setSecondSpare(seconds);
                setSeconds(0);
            }
        }
    }

    return(
        <div>
            <div className={isVisible}>
                <h1>Countdown Timer</h1>
                <input type="number"  id="target" min="1" value={minutes} onChange={(e)=>setMinutes(Number(e.target.value))} />
                <label htmlFor="target">:工作时长（分钟）</label>
                <div><hr /></div>
                <input type="number"   id="breakTarget" min="1" value={breakTime} onChange={(e)=>setBreakTime(Number(e.target.value))} />
                <label htmlFor="breakTarget">:休息时长（分钟）</label>
            </div>
            <div className="display-4">{hour}:{min}</div>
            <div className="d-flex justify-content-between mt-4">
                <button onClick={playF} className={playIcon} >开始</button>
                <button onClick={editF} className={editIcon} >编辑</button>
                <button onClick={stopF} className={stopIcon}>停止</button>
            </div>
        </div>
    ); 
} 

export default Timer;

2. 关键优化点说明 #

• useRef解决闭包问题：通过ref保存最新的state值，确保interval内部能获取到实时更新的状态。
• 精准控制useEffect触发时机：将依赖设置为edit和isPause，只有当编辑或暂停状态变化时才重启计时器，避免不必要的重复执行。
• 时间格式补零：使用padStart(2, '0')确保分钟和小时始终显示为两位数字。
• 初始化focusTime：添加额外的useEffect，在用户设置工作时长后自动初始化显示时间和focusTime。

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