UPD: Problema resuelto. Acabo de cambiar setInterval a 1 segundo en lugar de 1 ms. pero no tengo idea de por qué no funciona con ms, si todo está matemáticamente bien. gracias a los comentaristas
Ahí está mi componente de temporizador de cuenta regresiva personalizado (no está listo). Tengo algunos problemas con el conteo de segundos. He probado diferentes formas de calcular los segundos. Por alguna razón siempre funciona mal.
class Timer extends Component{ state = { playerTime : 3*60*1000, //initialize time with 3 minutes hours : ()=> { //did not tryed wait more than hour, but first countdown is well var hours = hours = Math.floor((this.state.playerTime/(1000*60*60))%24); return hours; }, minutes : () => { //minutes do countdown well var minutes = Math.floor((this.state.playerTime/(1000*60))%60); return minutes; }, seconds : () => { // if divide by 100 seconds starts from 59, but after 0 goes 59 again, minutes do not countdown //if divide by 1000 its works in right way but in 10 times slower var seconds = Math.floor((this.state.playerTime/1000)%60); return seconds; }, }; render(){ return( //create a button with black backround <TouchableOpacity style={styles.playerButton} onPress={() => { //start countdowning timer setInterval(() => { this.setState({playerTime : Number(this.state.playerTime-1)}) } , 1) }}> <View justifyContent="center"> <Text style={styles.timerText}> {/*output a time in text format h:m:s */} {this.state.hours()}: {this.state.minutes()}: {this.state.seconds()} </Text> </View> </TouchableOpacity> ); }; };Soy nuevo en JS y React Native. Desarrollando mi propio reloj de ajedrez. Dime por favor si conoces algunos relojes de ajedrez js de código abierto
Primero, probablemente debería usar componentes de función, son las cosas correctas para hacer en el 99% de los casos de uso.
Además, las horas, los minutos y los segundos no deberían formar parte de tu estado porque no actúas sobre ellos directamente. Estos son valores que puede derivar del único estado que necesita (playerTime).
Aquí hay un ejemplo de trabajo (tendrá que estudiar un poco el código para ver cómo funciona y adaptarlo a su caso si realmente desea usar un componente de clase)
import React, { useState } from "react"; export const Timer = ({ initialTime }) => { const [time, setTime] = useState(initialTime); const start = () => { setInterval(() => setTime((time) => time - 1), 1000); }; const hours = Math.floor(time / 3600); const minutes = Math.floor((time - hours * 3600) / 60); const seconds = time - minutes * 60; return ( <> <button type="button" onClick={start}> Start countdown </button> <div> <h2>{time}</h2> {hours}:{minutes}:{seconds} </div> </> ); };