React+Moment.js倒计时状态切换UI显示问题求助

先直接给你修复后的完整逻辑，再讲关键问题点：

核心代码实现 #

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

const SaleCountdown = () => {
  // 定义销售开始/结束时间（建议用UTC时间避免时区问题）
  const SALE_START = moment('2024-06-01T00:00:00');
  const SALE_END = moment('2024-06-10T23:59:59');
  
  const [countdown, setCountdown] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0
  });
  const [saleStatus, setSaleStatus] = useState('pending'); // pending | active | closed

  useEffect(() => {
    let timer;

    const updateCountdown = () => {
      const now = moment();
      
      // 1. 判断销售未开始
      if (now.isBefore(SALE_START)) {
        setSaleStatus('pending');
        return;
      }
      
      // 2. 判断销售已结束
      if (now.isAfter(SALE_END)) {
        setSaleStatus('closed');
        // 清理定时器
        if (timer) clearInterval(timer);
        return;
      }
      
      // 3. 计算倒计时
      setSaleStatus('active');
      const diff = SALE_END.diff(now);
      const duration = moment.duration(diff);
      
      setCountdown({
        days: Math.floor(duration.asDays()),
        hours: duration.hours(),
        minutes: duration.minutes(),
        seconds: duration.seconds()
      });
    };

    // 初始化执行一次
    updateCountdown();
    // 每秒更新一次
    timer = setInterval(updateCountdown, 1000);

    // 组件卸载或依赖变化时清理定时器
    return () => {
      if (timer) clearInterval(timer);
    };
  }, []);

  // 渲染UI
  return (
    <div className="countdown-container">
      {saleStatus === 'pending' && <div>Sale Not Started</div>}
      {saleStatus === 'closed' && <div>Sale is Closed</div>}
      {saleStatus === 'active' && (
        <div>
          {countdown.days}d {countdown.hours}h {countdown.minutes}m {countdown.seconds}s
        </div>
      )}
    </div>
  );
};

export default SaleCountdown;

你之前代码的常见问题点 #

• 定时器清理不彻底：倒计时用setInterval对应清理要使用clearInterval，而非clearTimeout；同时要确保组件卸载、状态切换到结束时都清理定时器，避免内存泄漏和无效更新。
• 状态判断逻辑混乱：没有明确区分三种状态（未开始/进行中/已结束），导致UI切换时出现冲突。
• 时区问题：如果你的开始/结束时间是本地时间，建议转成UTC时间（比如moment.utc('2024-06-01T00:00:00')），避免不同时区显示错误。
• Moment.js用法错误：直接用diff生成duration计算时间差，比手动计算更可靠，不会出现秒数负数或逻辑错误。

验证步骤 #

1. 替换你的组件代码，修改SALE_START和SALE_END为你的实际时间。
2. 测试三种场景：
   • 把系统时间调到开始时间之前，确认显示Sale Not Started
   • 调到开始和结束之间，确认倒计时正常跳动
   • 调到结束时间之后，确认显示Sale is Closed且定时器停止

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