1

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?

1
  • 1
    Seguramente eso debe estar pasando por hacer el 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”. Commented el 20 ene. 2022 a las 0:40

1 respuesta 1

2

Los hooks de React son asíncronos, en otras palabras, que hagas un setKilometros en una línea, y en la siguiente uses la variable kilometros, no te garantiza que el valor esté actualizado.

Para solucionarlo deberías hacer algo así:

function calcularKmh(event) {
      const valorKilometros = event.target.value;
      setKilometros(valorKilometros)
      setMillas(valorKilometros * 1.609344)
      setNudos(valorKilometros * 1.852)
  }

Si te fijas, creo una const nueva con el nuevo valor de los kilómetros, y utilizo esa variable para setear el estado y hacer todos los otros cálculos.

Deberías hacer algo similar en el resto de las funciones.

1
  • Lo pude resolver asi con este metodo! gracias!
    – pilki
    Commented el 20 ene. 2022 a las 16:36

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.