Estoy haciendo un convertidor de unidades con react y tengo el siguiente problema:
Cuando ingreso el valor a convertir el resultado siempre va un paso atras, es decir, si ingreso 100 es como si ingresara 10.
Dejo el codigo aca:
const [kilometros, setKilometros] = useState(0)
const [millas, setMillas] = useState(0)
const [nudos, setNudos] = useState(0)
function calcularKmh(event) {
setKilometros(event.target.value)
setMillas(kilometros * 1.609344)
setNudos(kilometros * 1.852)
console.log(millas,nudos)
}
function calcularMph(event){
setMillas(event.target.value)
setKilometros(millas * 1.609344)
setNudos(millas * 1.150779)
}
function calcularKts(event){
setNudos(event.target.value)
setKilometros(nudos * 1.852)
setMillas(nudos * 1.150779)
}
return (
<div className='medidas'>
<form>
<div>
<input placeholder='Velocidad en KM/H' type='text' value={kilometros} onChange={calcularKmh} /> <span>KM/H</span>
</div>
<div>
<input placeholder='Velocidad en MP/H' type='text' value={millas} onChange={calcularMph} /> <span>MP/H</span>
</div>
<div>
<input placeholder='Velocidad en KTS' type='text' value={nudos} onChange={calcularKts} /><span>KTS</span>
</div>
</form>
</div>
)
Todos los cambios se hacen un paso despues, que deberia cambiar?
console.log()
inmediatamente después de setear el estado. Para entender porqué esa no es una buena práctica, te recomiendo que leas un artículo que escribí sobre eso y así puedas tener una explicación completa: Dentro de la caja negra de “setState”.