应用反应 setInterval, clearInterval useEffect

Question

我正在尝试使用 moment.jsx 每 1 秒给一个计时器。

const onlive = useOnlive(); // react-query Custom Hook
console.log(onlive); 

{
    "event": {
        "id": 933,
        "startDate": "2023-01-17T01:00:00.000Z"
    },
    "nextEvent": {
        "id": 930,
        "startDate": "2023-01-18T13:20:00.000Z"
    }
}

我试图通过计算 nextEvent - currentTime 并使用 useEffect 中的 setInteval 和 clearInterval 函数来计算剩余时间来创建计时器，但计时器不起作用。

为什么定时器 (setInteval, clearInterval) 不是每秒触发一次？ useOnlive Custom API Hook每秒调用一次，定时器是否起作用？

const nextStartTime = moment(onlive.data?.nextEvent?.startDate); // 2023-01-18 
const nowTime = moment(); // current time 

  useEffect(() => {
      const nextStartTimeId = setInterval(() => {
        setHour(nextStartTime.diff(nowTime, 'hours', false) % 24);
        setMinute(nextStartTime.diff(nowTime, 'minutes', false) % 60);
        setSecond(nextStartTime.diff(nowTime, 'seconds', false) % 60);
      }, 100);
      return () => clearInterval(nextStartTimeId);
  }, [setHour, setMinute, setSecond, nextStartTime, nowTime]);

return (
               <span>
                   The session starts {hour < 10 ? "0" + hour : hour}:
                   {minute < 10 ? "0" + minute : minute}:
                   {second < 10 ? "0" + second : second} later.
               </span>
)

我怎样才能让定时器工作？

Answer 1

您将间隔设置为100毫秒而不是1000毫秒

const nextStartTimeId = setInterval(() => {
  setHour(nextStartTime.diff(nowTime, "hours", false) % 24);
  setMinute(nextStartTime.diff(nowTime, "minutes", false) % 60);
  setSecond(nextStartTime.diff(nowTime, "seconds", false) % 60);
}, 1000);