React中实现H:M:S格式计时器时显示完整日期问题如何解决？

问题解答 #

该问题和React运行机制无关，是JavaScript代码编写错误导致的：

• Date.prototype.toString() 方法不支持传入格式配置参数，你传入的{hour: '2-digit', minute:'2-digit'}对该方法完全无效，它默认就会返回包含年月日、时间、时区的完整字符串，这就是你看到完整日期的核心原因。
• 你要实现指定格式的时间输出，应该使用toLocaleTimeString()方法，如果需要时:分:秒的格式，还要额外加上second的格式配置。
• 另外你当前的计时器逻辑不完整，没有设置定时器更新state.count，所以时间不会自动走数。

修复后的完整代码 #

import React , { Component } from 'react';

class Timer extends Component {
    constructor (props) {
        super(props);
        this.state = {
            count : 0
        }
        this.timer = null;
    }

    componentDidMount() {
        // 每秒更新计数
        this.timer = setInterval(() => {
            this.setState(prev => ({ count: prev.count + 1 }))
        }, 1000)
    }

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

    render () {
        const hour = Math.floor(this.state.count/3600);
        const minutes = Math.floor((this.state.count - hour*3600)/60);
        const seconds = this.state.count - hour*3600 - minutes*60;
        const date = new Date();
        date.setHours(hour, minutes, seconds);
        
        return(
            <div>
                {date.toLocaleTimeString('zh-CN', {hour: '2-digit', minute:'2-digit', second: '2-digit'})}
            </div>
        );
    }

}

export default Timer;

如果你不需要依赖Date对象，也可以直接手动格式化字符串，灵活性更高：

render () {
    const hour = Math.floor(this.state.count/3600);
    const minutes = Math.floor((this.state.count - hour*3600)/60);
    const seconds = this.state.count - hour*3600 - minutes*60;
    // 手动补零逻辑
    const formatNum = (num) => num < 10 ? `0${num}` : num;
    return(
        <div>
            {formatNum(hour)}:{formatNum(minutes)}:{formatNum(seconds)}
        </div>
    );
}

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