React番茄钟：传入箭头函数的Session变量更新失效问题求助

问题根源 #

1. 组件参数接收错误：React函数组件的入参是props对象，你当前把Session和isStarted作为独立参数传入，实际上Session拿到的是整个props对象，isStarted为undefined，导致始终沿用初始的props值（1500秒）。
2. 状态未响应session更新：minutes和seconds的初始值仅在组件首次渲染时设置，父组件的session变化时，不会触发这两个状态的同步更新。
3. 定时器闭包陷阱：原useEffect依赖minutes和seconds，每次状态变化都会重建定时器，且定时器内部引用的是状态的快照值，导致倒计时逻辑异常。

修复步骤 #

1. 修正组件参数接收方式 #

将Countdown改为解构props对象的形式，同时在Timer组件中调用时传入正确的props：

// Countdown组件定义
const Countdown = ({ session, isStarted }) => {
    // ... 后续代码
}

// Timer组件中调用Countdown
{Countdown({ session, isStarted })}

2. 监听session变化，同步倒计时状态 #

添加useEffect监听session，当session更新时重置倒计时的剩余时长：

useEffect(() => {
    const newMinutes = Math.floor(session / 60);
    const newSeconds = session % 60;
    setMinutes(newMinutes);
    setSeconds(newSeconds);
}, [session]);

3. 修复定时器闭包问题 #

改用总剩余秒数管理状态，避免分开维护分钟和秒带来的逻辑混乱，同时优化定时器逻辑：

const Countdown = ({ session, isStarted }) => {
    const [remainingSeconds, setRemainingSeconds] = useState(session);

    // 监听session变化，重置倒计时
    useEffect(() => {
        setRemainingSeconds(session);
    }, [session]);

    useEffect(() => {
        let interval;
        if (isStarted && remainingSeconds > 0) {
            interval = setInterval(() => {
                setRemainingSeconds(prev => prev - 1);
            }, 1000);
        } else if (remainingSeconds === 0) {
            clearInterval(interval);
        }
        return () => clearInterval(interval);
    }, [isStarted, remainingSeconds]);

    const minutes = Math.floor(remainingSeconds / 60);
    const seconds = remainingSeconds % 60;

    return (
        <div>
            {remainingSeconds > 0 ? (
                <h1>{minutes}:{seconds < 10 ? `0${seconds}` : seconds}</h1>
            ) : null}
        </div>
    );
};

完整修复后的Timer组件 #

import React, { useState, useEffect } from "react";

const Countdown = ({ session, isStarted }) => {
    const [remainingSeconds, setRemainingSeconds] = useState(session);

    useEffect(() => {
        setRemainingSeconds(session);
    }, [session]);

    useEffect(() => {
        let interval;
        if (isStarted && remainingSeconds > 0) {
            interval = setInterval(() => {
                setRemainingSeconds(prev => prev - 1);
            }, 1000);
        } else if (remainingSeconds === 0) {
            clearInterval(interval);
        }
        return () => clearInterval(interval);
    }, [isStarted, remainingSeconds]);

    const minutes = Math.floor(remainingSeconds / 60);
    const seconds = remainingSeconds % 60;

    return (
        <div>
            {remainingSeconds > 0 ? (
                <h1>{minutes}:{seconds < 10 ? `0${seconds}` : seconds}</h1>
            ) : null}
        </div>
    );
};

function Timer({ session }) {
    const [isStarted, setIsStarted] = React.useState(false);
    const [isPaused, setIsPaused] = React.useState(false);

    const togglePause = () => {
        setIsPaused(prev => !prev);
    };

    return (
        <div className='timer'>
            <h3>Session</h3>
            <Countdown session={session} isStarted={isStarted && !isPaused} />
            <button onClick={() => setIsStarted(true)} disabled={isStarted}>start</button>
            <button onClick={togglePause} disabled={!isStarted}>
                {isPaused ? 'continue' : 'stop'}
            </button>
            <button>{session}</button>
        </div>
    );
}

export default Timer;

额外优化 #

• 给start按钮添加disabled状态，避免重复点击
• 完善stop按钮的暂停/继续逻辑，添加isPaused状态
• 用总剩余秒数管理状态，减少逻辑复杂度

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