React实现每周五倒计时功能解决方案（已解决）

原组件仅支持手动传入截止时间，现在要改成自动计算距离下一个周五的倒计时，以下是改造后的完整实现：

import React, { Component } from "react";
import "./styles.css";

class DateCountdown extends Component {
  constructor(props) {
    super(props);
    this.state = {
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      deadline: this.getNextFriday() // 初始化时获取下一个周五
    };
  }

  componentDidMount() {
    this.getTimeUntil(this.state.deadline);
    this.interval = setInterval(() => this.getTimeUntil(this.state.deadline), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval); // 清理定时器，避免内存泄漏
  }

  // 计算下一个周五的日期，默认设置为周五23:59:59
  getNextFriday() {
    const now = new Date();
    const currentDay = now.getDay(); // 0=周日, 1=周一...5=周五,6=周六
    let daysToAdd;

    // 计算需要添加的天数，得到下一个周五
    if (currentDay < 5) {
      daysToAdd = 5 - currentDay;
    } else {
      daysToAdd = 7 - (currentDay - 5);
    }

    const nextFriday = new Date(now);
    nextFriday.setDate(now.getDate() + daysToAdd);
    // 设置周五的截止时间，这里设为23:59:59，可按需调整
    nextFriday.setHours(23, 59, 59, 0);
    return nextFriday;
  }

  leading0(num) {
    return num < 10 ? `0${num}` : num;
  }

  getTimeUntil(deadline) {
    const time = Date.parse(deadline) - Date.parse(new Date());
    
    if (time < 0) {
      // 当前时间已超过周五，获取下一周的周五并更新状态
      const newDeadline = this.getNextFriday();
      this.setState({ deadline: newDeadline }, () => {
        this.getTimeUntil(newDeadline);
      });
    } else {
      const seconds = Math.floor((time / 1000) % 60);
      const minutes = Math.floor((time / 1000 / 60) % 60);
      const hours = Math.floor((time / (1000 * 60 * 60)) % 24);
      const days = Math.floor(time / (1000 * 60 * 60 * 24));
      this.setState({ days, hours, minutes, seconds });
    }
  }

  render() {
    return (
      <div className="content">
        <div className="Clock-days">{this.leading0(this.state.days)}d</div>
        <div className="Clock-hours">{this.leading0(this.state.hours)}h</div>
        <div className="Clock-minutes">
          {this.leading0(this.state.minutes)} Min
        </div>
        <div className="seconds">{this.leading0(this.state.seconds)} Sec</div>
      </div>
    );
  }
}

export default DateCountdown;

关键改造点说明： #

• 自动计算下一个周五：getNextFriday函数根据当前日期，计算出最近的下一个周五，并设置截止时间为当天23:59:59（可根据需求调整具体时分秒）。
• 倒计时自动续期：当当前时间超过周五截止时间时，自动重新计算下一周的周五，实现循环倒计时。
• 内存泄漏防护：添加componentWillUnmount清理定时器，避免组件卸载后定时器继续运行。
• 移除手动传入依赖：组件内部自动维护截止时间，无需再通过props传入deadline。

内容的提问来源于stack exchange，提问作者Enes Burak Elmal