Uso react-countdown-circle-timer para generar un temporizador de cuenta regresiva. Intentando crear un controlador de eventos que cambie la duración del temporizador cada vez que el temporizador llega a cero.
El reloj inicialmente corre de 5 segundos, cuando llega a cero cambio el estado, luego uso esto para cambiar el nuevo valor asignado al reloj.
Para un ejemplo más práctico. Cuando el reloj llega inicialmente a cero, cambio el estado de mi stage a 2, configurando el temporizador a 6 segundos. Cuando estos relojes se agotan, cambio mi estado de stage a 3, configurando el temporizador a 7 segundos y así sucesivamente, hasta que me detengo en la etapa 5
Este es mi código:
const [ timer, setTimer ] = useState(5) const [stage, setStage] = useState(1) const timerMap = { 2: 6, 3: 7, 4: 8, 5: 9 } const changeTimeHandler = (timer, setTimer) => { setStage(stage+1) setTimer(timerMap[stage]) return { delay:1 } } console.log(timer) return ( <div className="App"> <div className="timer-wrapper"> <CountdownCircleTimer isPlaying duration={timer} colors={["#004777", "#F7B801", "#A30000", "#A30000"]} colorsTime={[10, 6, 3, 0]} onComplete={() => (changeTimeHandler(timer, setTimer))} size={100} > {renderTime} </CountdownCircleTimer> </div> </div> );Cuando ejecuto mi código me sale el error:
Warning: Received NaN for the 'strokeDashoffset' attribute. If this is expected, cast the value to a string.
Necesita ayuda para descubrir cómo construir la lógica para obtener el efecto deseado.
No tienes ninguna condición para detener la iteración.
Una solución simple probablemente sería:
const changeTimeHandler = (timer, setTimer) => { // -- stop if no more stages available if( !timerMap[stage] ){ return { shouldRepeat: false } // <-- Note: Maybe not 100% correct. I don't know this libraray. } setStage(stage+1) setTimer(timerMap[stage]) return { delay:1 } }