Quiero restablecer el contador de cuenta regresiva, escribí "countdownStatus === COUNTDOWNSTATUS.reset && countdownTimer !== 0 && clearTimeout(() => setCountdownTimer(countdownTimer === 0))"
Solo deja de contar. Pero no reiniciar...
¿Alguien podría ayudarme? Gracias
import './App.css';
import { useState } from 'react'
import { useEffect } from 'react';
const COUNTDOWNSTATUS = {
pause: 0,
start: 1,
default: 2,
reset: 3
}
function App() {
let [countdownTimer, setCountdownTimer] = useState(60)
const [countdownStatus, setCountdownStatus] = useState(COUNTDOWNSTATUS.default);
const handelClickCountdownStart = () => setCountdownStatus(COUNTDOWNSTATUS.start);
const handelClickCountdownPause = () => setCountdownStatus(COUNTDOWNSTATUS.pause);
const handelClickCountdownReset = () => setCountdownStatus(COUNTDOWNSTATUS.reset);
useEffect(() => {
countdownStatus === COUNTDOWNSTATUS.start && countdownTimer > 0 && setTimeout(() => setCountdownTimer(countdownTimer - 1), 1000)
countdownStatus === COUNTDOWNSTATUS.pause && countdownTimer !== 0 && clearTimeout()
countdownStatus === COUNTDOWNSTATUS.reset && countdownTimer !== 0 && clearTimeout(() => setCountdownTimer(countdownTimer === 0))
})
return (
<div className="App">
<h1>Countdown Timer</h1>
<h1>{countdownTimer}</h1>
<button onClick={handelClickCountdownStart}>Start</button>
<button onClick={handelClickCountdownPause}>Pause</button>
<button onClick={handelClickCountdownReset}>Reset</button>
</div>
);
}
export default App;
Hay algunos problemas con su código.
Primero, debe implementar una matriz de dependencia con la variable countdownStatus , ya que es la que está viendo.
En segundo lugar, debe usar setInterval para esta situación y almacenar su referencia para borrar el intervalo en pausa, reinicio o contador que llega a 0. Algo como esto:
import './App.css';
import { useState } from "react";
import { useEffect } from "react";
const COUNTDOWNSTATUS = {
pause: 0,
start: 1,
default: 2,
reset: 3
};
let intervalId = null;
function App() {
let [countdownTimer, setCountdownTimer] = useState(60);
const [countdownStatus, setCountdownStatus] = useState(
COUNTDOWNSTATUS.default
);
const handelClickCountdownStart = () =>
setCountdownStatus(COUNTDOWNSTATUS.start);
const handelClickCountdownPause = () =>
setCountdownStatus(COUNTDOWNSTATUS.pause);
const handelClickCountdownReset = () =>
setCountdownStatus(COUNTDOWNSTATUS.reset);
useEffect(() => {
switch (countdownStatus) {
case COUNTDOWNSTATUS.start:
intervalId = setInterval(() => {
setCountdownTimer((prevValue) => {
const newValue = prevValue - 1;
if (newValue <= 0) clearInterval(intervalId);
return newValue;
});
}, 1000);
break;
case COUNTDOWNSTATUS.pause:
clearInterval(intervalId);
break;
case COUNTDOWNSTATUS.reset:
clearInterval(intervalId);
setCountdownTimer(60);
break;
default:
break;
}
}, [countdownStatus]);
return (
<div className="App">
<h1>Countdown Timer</h1>
<h1>{countdownTimer}</h1>
<button onClick={handelClickCountdownStart}>Start</button>
<button onClick={handelClickCountdownPause}>Pause</button>
<button onClick={handelClickCountdownReset}>Reset</button>
</div>
);
}
export default App;