React interval倒计时计时器归0不终止进入负数如何解决

• 定时器终止条件逻辑错误：现有清理定时器的分支要求props.timerActive为false且countdown等于0才触发，只要props.timerActive保持为true，哪怕倒计时已经走到0，也不会执行清理逻辑，定时器会持续运行，数值就会不断递减为负数。
• 数值更新缺少边界校验：setCountdown的更新回调直接执行countdown => countdown - 1，没有判断当前数值是否已经到0，进一步导致了负数的出现。

调整定时器启动条件，同时在数值更新时增加边界判断，倒计时归0时直接终止定时器，修复后代码如下：

const [staticCountdown, setStaticCountdown] = useState(15);
const [countdown, setCountdown] = useState(15);

const setCount = (count) => {
    if (!props.timerActive) {
        setStaticCountdown(count);
        setCountdown(count);
    }
};

useEffect(() => {
    let interval = null;
    // 仅当定时器激活且倒计时未结束时启动计时器
    if (props.timerActive && countdown > 0) {
        interval = setInterval(() => {
            setCountdown(prev => {
                // 倒计时走到1的时候，下一次更新就归0，同时清理定时器
                if (prev <= 1) {
                    clearInterval(interval);
                    return 0;
                }
                return prev - 1;
            });
        }, 1000);
    }
    // 依赖变化或组件卸载时清理定时器，避免内存泄漏
    return () => clearInterval(interval);
}, [props.timerActive, countdown]);

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