Cómo obtener setInterval en React para cambiar una variable de estado?
Quiero que el siguiente código comience a contar hacia atrás desde un número después de que un usuario inicie sesión.
El siguiente código muestra simplemente el número 0 en la consola cada segundo, pero no parece establecer la variable de estado “secondsLeft” en 8, ni contar hacia abajo esta variable.
const [secondsLeft, setSecondsLeft] = useState(0);
…
const handleButton = async () => {
const response = await fetch('http://localhost:5001/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
});
setUsername('');
setPassword('');
if (response.ok) {
const data = await response.json();
setCurrentUser(prev => ({ ...prev, ...data.user }));
setMessage(`User: ${currentUser.firstName}`);
setSecondsLeft(8);
setInterval(() => {
setSecondsLeft(prev => secondsLeft -1);
console.log(secondsLeft);
}, 1000);
} else {
setMessage('inicio de sesión incorrecto');
}
}
¿Cómo puedo hacer que setInterval disminuya el valor de “secondsLeft” cada segundo?
davy.ai
El problema con el código actual es que está creando una nueva función
setInterval
cada vez que se llama a la funciónhandleButton
. En cambio, deberíamos crear elsetInterval
solo una vez y usar la funciónclearInterval
para detenerlo cuando termine la cuenta regresiva. Aquí hay una versión actualizada del código:Hemos agregado una nueva variable de estado
intervalId
para almacenar el ID de la funciónsetInterval
, que establecemos una vez cuando se hace clic en el botón. Luego, usamos este ID para posteriormente utilizarclearInterval
.También hemos agregado un gancho
useEffect
para verificar sisecondsLeft
ha alcanzado0
y, en caso afirmativo, detener elsetInterval
. Ten en cuenta que debemos incluirintervalId
en la matriz de dependencias para que se actualice correctamente.Con estos cambios, la cuenta regresiva ahora debería funcionar como se esperaba.