Estoy usando la biblioteca de react-countdown para fines de contador. Quiero reiniciar el temporizador cuando termine el tiempo. Debería reiniciarse de nuevo y correr el tiempo.
Aquí está el código:
export default function App() { const [timerState, settimerState] = useState(Date.now() + 10000); const onCompleteTimeFun = () => { console.log("Resetting Time"); settimerState(Date.now() + 10000); }; const timerRenderer = ({ hours, minutes, seconds, completed }) => { return ( <span> {hours}:{minutes}:{seconds} </span> ); }; return ( <div> <Countdown date={timerState} onComplete={onCompleteTimeFun} renderer={timerRenderer} /> </div> ); }Pero no disminuye después de restablecer el tiempo. No sé qué estoy haciendo mal. Por favor ayúdame con algunas soluciones.
Aquí está el enlace CodeSandBox: https://codesandbox.io/s/timer-app-forked-pkqfcn?file=/src/App.js
Utilice la propiedad key para volver a renderizar el componente. Esto también se indica en los documentos :
Este es uno de los accesorios de componentes internos de React para ayudar a identificar elementos a lo largo del proceso de reconciliación. Se puede usar para reiniciar la cuenta regresiva al pasar una nueva cadena o valor numérico.
En tu caso:
import Countdown from "react-countdown"; import { useState } from "react"; export default function App() { const [k, setK] = useState(false); const onCompleteTimeFun = () => { console.log("Resetting Time"); setK((i) => !i); }; const timerRenderer = ({ hours, minutes, seconds, completed }) => { return ( <span> {hours}:{minutes}:{seconds} </span> ); }; return ( <div> <Countdown key={k} date={Date.now() + 10000} onComplete={onCompleteTimeFun} renderer={timerRenderer} /> </div> ); }Tenga en cuenta que no necesita guardar el estado para la fecha.