如何解决为什么我的 React 倒数计时器组件在正确渲染时间时闪烁 NaN
我是 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 举报,一经查实,本站将立刻删除。