React Countdown Timer前导零补全不生效问题排查

你的代码存在3个核心问题，导致补零逻辑完全不生效：

• 补零逻辑执行位置错误：你把补零的if判断写在了componentDidMount生命周期中、setInterval定时器的外部，这个生命周期仅在组件首次挂载时执行1次，后续每秒触发的时间更新逻辑完全不会走到补零判断，自然不会生效。
• 违反React状态更新规则：你通过this.state.hours = "0"+this.state.hours的方式直接修改state，React中禁止直接修改state属性，这种修改不会触发组件重渲染，且后续setState执行时会直接覆盖你手动修改的值。
• 逻辑顺序错误：就算补零判断能触发，你是在setState更新时间值之前读取的state，拿到的还是上一次的旧值，根本不是最新计算出来的时间，补零操作完全作用在错误的值上。

修正方案 #

补零逻辑应该放在每次计算时间的流程中，计算出小时、分钟、秒的原始数值后先做格式化，再通过setState统一更新，不要直接修改state，另外建议补充定时器清除逻辑避免内存泄漏，修正后完整代码如下：

import React,{Component} from "react";

class Countdown extends Component{
    constructor(props){
        super(props);
        this.state={
            hours:"00",
            minutes:"00",
            seconds:"00"
        }
        this.timer = null;
    }

    // 通用补零工具方法
    padZero = (num) => num < 10 ? `0${num}` : `${num}`;

    componentDidMount(){
        const countDownDate = new Date();
        countDownDate.setHours(24,0,0,0);
        
        this.timer = setInterval(
            () => {
                const now = new Date().getTime();
                const timeleft = countDownDate - now;
                // 先计算原始时间数值
                const rawHours = Math.floor((timeleft % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
                const rawMinutes = Math.floor((timeleft % (1000 * 60 * 60)) / (1000 * 60));
                const rawSeconds = Math.floor((timeleft % (1000 * 60)) / 1000);
                // 补零后统一更新state
                this.setState({
                    hours: this.padZero(rawHours),
                    minutes: this.padZero(rawMinutes),
                    seconds: this.padZero(rawSeconds)
                });
            },
            1000
        );
    }

    componentWillUnmount() {
        // 组件卸载时清除定时器，避免内存泄漏
        if (this.timer) clearInterval(this.timer);
    }

    render(){    
        return (
            <>
            <div className="countdown-timer">
                <div className = "countdown-text">
                    <p>DEAL ENDS<br></br> Hrs: Min: Sec:</p>
                </div>
                <div className="countdown-time">
                    <p>{this.state.hours}:{this.state.minutes}:{this.state.seconds} </p>
                </div>
            </div>
            </>
        )
    }
    
}

export default Countdown;

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