Así que estoy creando una aplicación de meditación en React. Para comenzar de manera simple, le di una cuenta regresiva de 25 minutos.
Quiero que la cuenta regresiva comience cuando se haga clic en el botón. Sin embargo, cuando envuelvo setInterval en la función handleClick(), los segundos disminuyen por clic en lugar de activar la cuenta regresiva una vez.
Cualquier ayuda se agradece, gracias por adelantado.
import React, { Component, useState } from "react"; function Timer() { const [minutes, setMinutes] = useState(25); const [seconds, setSeconds] = useState(0); function handleClick() { console.log('Clicked'); let interval = setInterval(() => { clearInterval(interval); if (seconds === 0) { if (minutes !== 0) { setSeconds(59); setMinutes(minutes - 1); } else { setSeconds(seconds - 1); } }, 1000) } const timerMinutes = minutes < 10 ? `0${minutes}`: minutes; const timerSeconds = seconds < 10 ? `0${seconds}` : seconds; return ( <> <div className="grey-box"> <div className="number-box"> <h2 className="timer-text">{timerMinutes}:{timerSeconds}</h2> </div> <div className="buttons-container"> <button className="timer-button" onClick={handleClick}> <img className="play" src="https://img.icons8.com/ios-glyphs/90/ffffff/play--v1.png" /> </button> </div> </div> </> ); } export default Timer;Estás declarando con cada clic que se resta un minuto:
setMinutes(minutes - 1);Si desea que el temporizador se configure solo una vez, puede verificar si ya se configuró y, de ser así, cancelar la función handleClick. Una declaración let para el temporizador solo estará disponible en ese bloque de código (por ejecución). Entonces, cuando ocurra otro clic, no tendrá acceso al temporizador. Use "this.interval" (alcance de la función) o "var interval" (alcance global/de ventana) y luego podrá verificar en la parte superior de la función handleClick si el temporizador ya está configurado.
if (this.interval) return; OR if (interval) return;Estás creando el temporizador de una manera mucho más complicada. Hice una muestra que puede cubrir este caso de uso junto con algunos casos extremos.
import React, { useState, useEffect, useRef } from "react"; import ReactDOM from "react-dom"; import "./styles.css"; function ClearTimer(TimerHndlRef) { clearInterval(TimerHndlRef.current); TimerHndlRef.current = null; } function App() { const TimerHndlRef = useRef(); const [seconds, secondsSet] = useState(5); const onClick = () => { if (TimerHndlRef.current) { ClearTimer(TimerHndlRef); return; } TimerHndlRef.current = setInterval( () => secondsSet((s) => { const v = s - 1; if (v > 0) return v; ClearTimer(TimerHndlRef); return 0; }), 1000, ); }; const onChange = (e) => secondsSet(parseInt(e.target.value, 10)); useEffect(() => { return () => { if (!TimerHndlRef.current) return; ClearTimer(TimerHndlRef); }; }, []); const mLeft = Math.floor(seconds / 60); const sLeft = seconds - mLeft * 60; const mDisp = mLeft < 10 ? `0${mLeft}` : mLeft; const sDisp = sLeft < 10 ? `0${sLeft}` : sLeft; return ( <div> <p> <input type="number" value={seconds} onChange={onChange} /> = {mDisp}m +{" "} {sDisp}s </p> <button onClick={onClick}>Test</button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);