0
97
Visualizaçõeswhat wrong i am doing here? curunt time to 2 minutes countdown
what's wrongdoing here I am creating current time to 2 minutes countdown using moment js here I am phasing issues timer stop at 1:59 not decrease time after 1:59
const CountDownTimer = () => {
const [duration, setDuration] = useState(null);
const getFinalTime = useCallback((duration) => {
const currentDuration = moment.duration(duration, "milliseconds");
let finalMinutes = currentDuration?.minutes();
let finalSeconds = currentDuration?.seconds();
finalMinutes = finalMinutes < 10 ? `0${finalMinutes}` : finalMinutes;
finalSeconds = finalSeconds < 10 ? `0${finalSeconds}` : finalSeconds;
return `${finalMinutes}:${finalSeconds}`;
}, []);
useEffect(() => {
const startTimer = moment(billData?.createdAt);
const endTimer = moment(billData?.createdAt).add(2, "minutes");
const duration = moment.duration(endTimer.diff(startTimer), "milliseconds");
const interval = setInterval(() => {
const newDuration = moment
.duration(duration - 1000, "milliseconds")
.asMilliseconds();
setDuration(newDuration);
}, 1000);
return () => clearInterval(interval);
}, [billData?.createdAt]);
// in getFinalTime passing duration
return <>{getFinalTime(duration)}</>;
};
export default CountDownTimer;
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
You seem to be doing a whole lot of unnecessary work for a countdown timer.
See below for a simple implementation.
- The timer component accepts a deadline
Dateobject. - The timer component has internal state that just ensures it gets updated every second by way of the effect.
- Computing the time left is a matter of computing the millisecond difference between the current time and the deadline, followed by a div/mod operation to extract minutes and seconds. (You could add another div/mod to get hours and minutes.)
function CountdownTimer({ deadline }) {
const [, setUpdate] = React.useState(0);
React.useEffect(() => {
const interval = setInterval(() => {
setUpdate((u) => u + 1);
}, 1000);
return () => clearInterval(interval);
}, []);
const timeLeftTotal = Math.max(
0,
Math.ceil((+deadline - +new Date()) / 1000)
);
const timeLeftMinutes = Math.floor(timeLeftTotal / 60);
const timeLeftSeconds = timeLeftTotal % 60;
const mmss = [timeLeftMinutes, timeLeftSeconds]
.map((s) => String(s).padStart(2, "0"))
.join(":");
return <div>Time left: {mmss}</div>;
}
function getDeadline(secondsInFuture) {
return new Date(+new Date() + secondsInFuture * 1000);
}
function App() {
const [deadline, setDeadline] = React.useState(() => getDeadline(120));
return (
<div className="App">
<CountdownTimer deadline={deadline} />
<hr />
<button onClick={() => setDeadline(getDeadline(60))}>
Reset deadline to 1 minute in the future
</button>
</div>
);
}
ReactDOM.render(<App />, document.getElementById("root"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>
·
Juan Pablo Isaza
Relatório
Responde à pergunta