为什么我的 React 倒数计时器组件在正确渲染时间时闪烁 NaN

编程问答 2022-05-22

问题描述

我是 React 的新手，我正在尝试渲染一个倒数计时器。一切似乎都正常，但倒计时如果在正确时间和 NaN:NaN:NaN 之间闪烁（交替）。

渲染似乎滞后，但我不明白为什么。

它也不是恒定的......有时计时器可以完美地工作 4 或 5 秒而不显示 NaN，有时 NaN 显示的闪烁非常快。

谁能解释一下为什么？

非常感谢您的帮助！

我有一个 Countdown 组件，我使用创建的日期道具呈现该组件，我使用另一个组件上的 React 挂钩获取该道具。

这是倒计时组件：

Countdown.js

import React,{ useEffect,useState,useRef } from "react";
import { add } from 'date-fns'

function Countdown(props) {
  const [timerHours,setTimerHours] = useState("00");
  const [timerMinutes,setTimerMinutes] = useState("00");
  const [timerSeconds,setTimerSeconds] = useState("00");

  let interval = useRef();

  const startTimer = () => {
    const countdownDate = add(new Date(props.created).getTime(),{
        hours: 48
      })


    interval = setInterval(() => {
      const Now = new Date().getTime();
      const distance = countdownDate - Now;

      const hours = Math.floor(
        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
      );
      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
      const seconds = Math.floor((distance % (1000 * 60)) / 1000);

      if (distance < 0) {
        clearInterval(interval.current);
      } else {
        setTimerHours(hours);
        setTimerMinutes(minutes);
        setTimerSeconds(seconds);
      }
    },1000);
  };

  useEffect(() => {
      startTimer()
      return () => {
          clearInterval(interval.current)
      }
  })

  return (
    <section className="timer-container">
      <div className="timer">
          <p>{timerHours}:{timerMinutes}:{timerSeconds}</p>
        </div>

    </section>
  );
}

export default Countdown;

这是我的另一个组件

OtherComponent.js

...

  const [object,setobject] = useState({});
  useEffect(() => {
    const loadobject = async (Id) => {
      const { response,isError } = await getobject(Id);
      if (isError) {
        setobject(null);
      } else {
        setobject(response.data);
      }
    };
    loadobject();
  },[]);

...

return (
...
    <div> <Countdown created={object.created}/> </div> 
...
)

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

date-fnsjavascriptreactjsreactjsreactjsreactjs