如何解决使用react hooks创建一个计时器
我要在我的网站中建立一个倒数计时器。 我的结束时间来自服务器(它是这样的数字:10500(这意味着直到计时器结束需要10500分钟))
我做不到,有人可以帮助我吗?
const [times,setTimes] = useState({ days: 0,hours: 0,minutes: 0,seconds: 0 });
const [timetoReserve,setTimetoReserve] = useState(props.reserveData.ToReserve);
React.useEffect(() => {
timetoReserve > 0 && setTimeout(() => checkTime(),1000);
},[timetoReserve]);
const checkTime = () => {
let minutesToReserve = timetoReserve - 1
setTimetoReserve(minutesToReserve)
let days = Math.floor(minutesToReserve / (1000 * 60 * 60 * 24));
let hours = Math.floor((minutesToReserve % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((minutesToReserve % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((minutesToReserve % (1000 * 60)) / 1000);
setTimes({ days,hours,minutes,seconds })
}
解决方法
类似的事情应该起作用:
import React,{useState,useEffect} from 'react';
const CountDown = ({ reserveData }) => {
const [secondsLeft,setSecondsLeft] = useState(reserveData.ToReserve * 60);
useEffect(() => {
const countDownTimeout = setTimeout(() => {
// Stop in case the time is over
if (secondsLeft > 0) {
return setSecondsLeft(seconds => seconds - 1);
}
clearTimeout(countDownTimeout);
},1000);
// Clean up if unmounted
return () => clearTimeout(countDownTimeout);
},[secondsLeft]);
const days = Math.floor(secondsLeft / (60 * 60 * 24));
const hours = Math.floor((secondsLeft % (60 * 60 * 24)) / (60 * 60));
const minutes = Math.floor((secondsLeft % (60 * 60)) / 60);
const seconds = Math.floor(secondsLeft % 60);
return (
<p>
{days} days,{hours}:{minutes}:{seconds}
</p>
);
};
export default CountDown;
您可以使用此组件,例如:
<CountDown
reserveData={{ToReserve: 24 * 6 * 60}}
/>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。