如何使用date-fns实现实时运行的时钟

你的代码问题出在setTimeout用法错误，同时没正确结合date-fns的格式化逻辑：

• setTimeout第一个参数需要传入函数，你直接写new Date().toLocaleTimeString(...)会立即执行这个表达式，返回时间字符串，但setTimeout本身会返回定时器ID（数字类型），这就是你看到输出number的原因。
• 要实现秒数实时跳动，需要每秒重复更新时间，setTimeout只执行一次，应该用setInterval。

以下是正确的实现代码：

import { useState, useEffect } from 'react';
import { format } from 'date-fns';

function LiveClock() {
  // 初始化时生成符合要求的时间格式
  const [currentTime, setCurrentTime] = useState(() => 
    format(new Date(), "dd-MM-yyyy HH:mm:ss")
  );

  useEffect(() => {
    // 每秒执行一次时间更新
    const timer = setInterval(() => {
      setCurrentTime(format(new Date(), "dd-MM-yyyy HH:mm:ss"));
    }, 1000);

    // 组件卸载时清除定时器，避免内存泄漏
    return () => clearInterval(timer);
  }, []);

  return <span>{currentTime}</span>;
}

关键说明： #

• 用setInterval替代setTimeout，实现每秒重复更新时间
• 定时器回调是一个函数，每次都会获取最新的Date实例，再通过date-fns的format方法生成你需要的格式字符串
• useEffect的清理函数必须清除定时器，防止组件卸载后定时器仍在后台运行
• 状态初始化用函数式写法，避免组件每次渲染都重复创建新的Date实例

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