React实现简易数字时钟报错求助（单状态对象存储时间）

问题描述 #

制作简易数字时钟时，希望将时间数据存储在单个对象状态中（而非分拆为hours、minutes、seconds三个独立状态），但代码运行报错。

错误信息 #

引用错误：date未定义

原代码 #

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

export default function Ex6() {

    const date = new date();
    const [time, setTime] = useState({hours:'00', minutes:'00', seconds:'00'});

    const updatetime = () => {
        setTime({hours:date.getHours(), minutes:date.getMinutes(), seconds: date.getSeconds()});
    }

    updatetime();

    return (
        <div>
            <p>{time.hours}:{time.minutes}:{time.seconds}</p>
        </div>
    )
}

问题分析与修复 #

1. 构造函数大小写错误：JavaScript日期构造函数是Date()（首字母大写），原代码写成new date()导致未定义错误，需改为new Date()。
2. 直接调用更新函数引发死循环：组件顶层直接调用updatetime()，每次渲染都会触发状态更新，进而重新渲染，陷入死循环。需用useEffect钩子控制更新时机。
3. 时间格式不统一：初始状态是两位字符串，但实际获取的时间可能是一位数（如9点显示9而非09），需要补零处理保证格式一致。

修正后的代码 #

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

export default function Ex6() {
    // 补零函数：将单个数字转为两位字符串
    const padZero = (num) => num.toString().padStart(2, '0');

    const [time, setTime] = useState({
        hours: padZero(new Date().getHours()),
        minutes: padZero(new Date().getMinutes()),
        seconds: padZero(new Date().getSeconds())
    });

    const updateTime = () => {
        const now = new Date();
        setTime({
            hours: padZero(now.getHours()),
            minutes: padZero(now.getMinutes()),
            seconds: padZero(now.getSeconds())
        });
    };

    // 初始化执行一次，之后每秒更新时间
    useEffect(() => {
        updateTime();
        const timer = setInterval(updateTime, 1000);
        // 组件卸载时清除定时器，避免内存泄漏
        return () => clearInterval(timer);
    }, []);

    return (
        <div>
            <p>{time.hours}:{time.minutes}:{time.seconds}</p>
        </div>
    )
}

关键说明 #

• 用useEffect配合空依赖数组，确保初始化仅执行一次，同时通过setInterval实现每秒自动更新时间。
• padZero函数统一时间显示格式，保证小时、分钟、秒始终为两位数字。
• 每次更新时重新创建Date实例，确保获取当前最新时间，避免复用旧日期对象导致时间停滞。

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