如何用Dayjs+React实现每周五0点倒计时及触发提醒

我需要实现一个每周五凌晨0点的倒计时器，到达0点时触发礼品提醒。最初尝试用原生JavaScript实现但未成功，随后改用react-countdown库结合Dayjs仍无法实现需求。当前面临的问题是：要让计数器从周五凌晨00:01开始，倒计时至下周五凌晨00:00，并每周循环。

以下是我使用Dayjs和react-countdown库的尝试代码：

CountTImer 组件代码 #

import { useEffect, useState } from "react";
import Countdown from "react-countdown";
import dayjs from "dayjs";
import { v4 as uuidv4 } from "uuid";
import "@/components/Utils/Weekday";
import HomeTimer from "./HomeTimer";
import "./isoWeekday";
import "./weekday";

const CountTImer = () => {
  const [theNextFriday, setTheNextFriday] = useState("null");
  const [countDownStop, setCountDownStop] = useState(false);
  const [keyForIteratingTime, setKeyForIteratingTime] = useState("");


  const nextWeekthursday4_59pm = dayjs() - dayjs().add(1, "week").day(1).hour(23).minute(59).second(59);
  const thisWeekthursday4_59pm = dayjs() - dayjs().day(1).hour(23).minute(59).second(59);
  const everyFriday12_00am = dayjs() - dayjs().day(2).hour(0).minute(1).second(1);
  useEffect(() => {
    const Interval = setInterval(() => {
      if (dayjs() < Math.abs(everyFriday12_00am) || dayjs() === Math.abs(everyFriday12_00am)) {
        setTheNextFriday(Math.abs(nextWeekthursday4_59pm));
      } else {
        setTheNextFriday(Math.abs(thisWeekthursday4_59pm));
      }
    }, 1000);
    return () => clearInterval(Interval);
  }, [nextWeekthursday4_59pm || thisWeekthursday4_59pm || everyFriday12_00am]);

  const Completionist = () => {
    setCountDownStop(true);
    setKeyForIteratingTime(uuidv4());
  };

  const renderer = ({ days, hours, minutes, seconds, completed }) => {
    if (completed) {
      return <Completionist />;
    } else {
      // Render a countdown
      return (
        <>
          <HomeTimer
            daysLeftToSelectWinner={days}
            hoursLeftToSelectWinner={hours}
            minutesLeftToSelectWinner={minutes}
            secondsLeftToSelectWinner={seconds}
          />
        </>
      );
    }
  };

  return (
    <div>
      <Countdown renderer={renderer} key={`${keyForIteratingTime}`} date={Date.now() + theNextFriday} />
    </div>
  );
};

export default CountTImer;

HomeTimer 组件代码 #

import { zeroPad } from "react-countdown";
import Parallax from "../Utils/Parallax";

const HomeTimer = ({
  daysLeftToSelectWinner,
  hoursLeftToSelectWinner,
  minutesLeftToSelectWinner,
  secondsLeftToSelectWinner,
}) => {
  return (
    <div>
      {daysLeftToSelectWinner && hoursLeftToSelectWinner && minutesLeftToSelectWinner && secondsLeftToSelectWinner && (
          <div >
              <div>
                <p > {zeroPad(daysLeftToSelectWinner)}</p>
                <p>DAYS</p>
              </div>
              <div >
                <p>{zeroPad(hoursLeftToSelectWinner)}</p>
                <p>HOURS</p>
              </div>
              <div >
                <p>{zeroPad(minutesLeftToSelectWinner)}</p>
                <p>MINUTES</p>
              </div>
              <div>
                <p>{zeroPad(secondsLeftToSelectWinner)}</p>
                <p>SECONDS</p>
              </div>
        </div>
      )}
    </div>
  );
};

export default HomeTimer;

当倒计时归零时，keyForIteratingTime（uuid）会更新，计时器重新启动。

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