React项目如何实现每日9点更新的固定9:00 am时间展示

问题根源 #

你当前的实现直接取当前系统日期拼接9:00 am，会导致每天0点到9点这段时间，日期已经跳转到当日，就会提前显示当日的9:00 am，不符合需求规则。

完整实现代码 #

import { useEffect, useState } from 'react';
import moment from 'moment';

const LastUpdatedLabel = () => {
  // 初始化展示时间
  const [displayTime, setDisplayTime] = useState(getTargetDate);

  // 核心日期计算逻辑
  function getTargetDate() {
    const now = moment();
    const today9am = moment().hour(9).minute(0).second(0);
    // 早于当日9点就取前一天的日期，否则取当日日期
    const targetDate = now.isBefore(today9am) ? now.subtract(1, 'days') : now;
    return `${targetDate.format('MMMM Do YYYY,')} 9:00 am`;
  }

  useEffect(() => {
    // 计算距离下一次9点的间隔毫秒数
    function getNextUpdateInterval() {
      const now = moment();
      const today9am = moment().hour(9).minute(0).second(0);
      const nextUpdateTime = now.isBefore(today9am) ? today9am : today9am.add(1, 'days');
      return nextUpdateTime.diff(now);
    }

    // 设置定时器到下一个9点自动更新
    const updateTimer = setTimeout(() => {
      setDisplayTime(getTargetDate());
    }, getNextUpdateInterval());

    // 组件卸载清除定时器
    return () => clearTimeout(updateTimer);
  }, [displayTime]);

  return <span>Last Updated: {displayTime}</span>;
};

export default LastUpdatedLabel;

逻辑说明 #

• 计算规则完全匹配需求：每日9点前显示前一天的9:00 am，到9点自动切换为当日的9:00 am
• 内置自动更新机制，用户停留在页面无需手动刷新，到每日9点会自动触发内容更新

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