1

Tengo un problema con un componente de React. Tengo un modal que hace la division entre dos valores que pone el usuario (velocidad y distancia) para darnos el resultado "tiempo". Esta velocidad la puede poner en Km, Millas o Millas Náuticas según diga el usuario y la velocidad también puede estar en Km, Millas o Nudos.

EL problema que tengo es que la cuenta se hace cada vez que el usuario hace un cambio en uno de los input, pero no cuando este cambia de unidad de medida, lo que hace que si uno quiere comparar diferentes velocidad o distancias tenga que cambiar uno de los input. Dejo un pedazo del codigo aca:

   const [unidadVelocidad, setUnidadVelocidad] = useState("kmh")

const [unidadDistancia, setUnidadDistancia] = useState("km")

const [velocidadFinal, setVelocidadFinal] = useState(0)

const [distanciaFinal, setDistanciaFinal] = useState(0)

function manipularVelocidad(event) {
    event.preventDefault()
    setUnidadVelocidad(event.target.value)
}

function manipularDistancia(event) {
    event.preventDefault()
    setUnidadDistancia(event.target.value)
}

function tomarVelocidad(event) {
    event.preventDefault()
    if (unidadVelocidad === "mph") {
        setVelocidadFinal(event.target.value * 1.60934)
    } else if (unidadVelocidad === "kts") {
        setVelocidadFinal(event.target.value * 1.852)
    } else {
        setVelocidadFinal(event.target.value)
    }
}

function tomarDistancia(event) {
    event.preventDefault()
    if (unidadDistancia === "mi") {
        setDistanciaFinal(event.target.value * 1.60934)
    } else if (unidadDistancia === "nm") {
        setDistanciaFinal(event.target.value * 1.852)
    } else {
        setDistanciaFinal(event.target.value)
    }
}


     let tiempoDeVuelo


    const resultadoHs = (distanciaFinal / velocidadFinal).toFixed(2)
    const resultadoMins = (resultadoHs * 60).toFixed(2)
    if (resultadoMins === "NaN" || resultadoHs === "NaN") {
        tiempoDeVuelo = ""
    } else {
        tiempoDeVuelo = `${resultadoHs} HS (${resultadoMins} min)`
    }

return (
    <div className="modal-fondo-herramienta">
        <div className="contenedor-herramientas">
            <div className="modal-header-button">
                <button onClick={toggleModal}>Cerrar</button>
            </div>
            <div>
                <div className="prueba">
                    <form>
                        <p>Velocidad</p>
                        <input type='text' placeholder='Velocidad' onChange={tomarVelocidad} />

                        <button className={unidadVelocidad === "kmh" ? "botones-herramientas activo" : "botones-herramientas"} value="kmh" onClick={manipularVelocidad}>KM</button>
                        <button className={unidadVelocidad === "mph" ? "botones-herramientas activo" : "botones-herramientas"} value="mph" onClick={manipularVelocidad}>MI</button>
                        <button className={unidadVelocidad === "kts" ? "botones-herramientas activo" : "botones-herramientas"} value="kts" onClick={manipularVelocidad}>KT</button>
                        <p>Distancia</p>

                        <input type='text' placeholder='Distancia' onChange={tomarDistancia} />

                        <button className={unidadDistancia === "km" ? "botones-herramientas activo" : "botones-herramientas"} value="km" onClick={manipularDistancia}>KM</button>
                        <button className={unidadDistancia === "mi" ? "botones-herramientas activo" : "botones-herramientas"} value="mi" onClick={manipularDistancia}>MI</button>
                        <button className={unidadDistancia === "nm" ? "botones-herramientas activo" : "botones-herramientas"} value="nm" onClick={manipularDistancia}>NM</button>
                    </form>
                </div>
                <div>
                    Tiempo estimado de vuelo: {tiempoDeVuelo}
                </div>
            </div>
        </div>
    </div>
)

Mil gracias.

1
  • Lo que está sucediendo es que lo que cambia los valores son las funciones tomarVelocidad y distancia, que solo se lanzan con los input, tendrías que posterior a lanzar las funciones de manipular, lanzar nuevamente las de tomar para que se actualicen los valores, ya que estas son las que hacen los cálculos. Y luego cambian los state lo cual hará renderizar el componente nuevamente. Commented el 19 ene. 2022 a las 5:22

1 respuesta 1

1

La siguiente solución esta basada en el codigo original, los cambios en el mismo son mínimos (uso de estados, re-renders y useEffect) pero conceptualmente muy diferentes a la solución propuesta por el OP.


Controlar Inputs y computar dentro de useEffect

Se describe el procedimiento para velocidad, el procedimiento para distancia es identico.

El problema se puede resolver usando estados para controlar el valor de ambos input y el calculo del tiempo de vuelo.

  const [tiempoDeVuelo, setTiempoDeVuelo] = useState(0)
  const [velocidadIn, setVelocidadIn] = useState("Velocidad")
  const [distanciaIn, setDistanciaIn] = useState("Distancia")

Se transforman los inputs de tal forma que React pueda controlar sus valores de estado:

<input type='text' name={velocidadIn} value={velocidadIn} placeholder='Velocidad' onChange={tomarVelocidad} />

<input type='text' name={distanciaIn} value={distanciaIn} placeholder='Distancia' onChange={tomarDistancia} />

Así, cada que cambie el estado de alguno de los inputs, se dispara un re-render:

function tomarVelocidad(event) {
    event.preventDefault()
    setVelocidadIn(event.target.value);
}

Asimismo, se especifica que cada que el componente se actualice con un re-render, se dispare un efecto si el valor de estado velocidad ha cambiado, se actualiza el nuevo estado velocidadIn:

useEffect(()=>{
    if (unidadVelocidad === "mph") {
      setVelocidadFinal(velocidadIn * 1.60934)
    } else if (unidadVelocidad === "kts") {
        setVelocidadFinal(velocidadIn * 1.852)
    } else {
        setVelocidadFinal(velocidadIn)
    }
  },[velocidadIn]);

También, se puede disparar un re-render cada que el usuario cambie la unidad de medida, que es el problema descrito por el OP:

function manipularVelocidad(event) {
    event.preventDefault()
    setUnidadVelocidad(event.target.value)
}

Entonces, también se va a disparar el efecto que cambia el estado de la velocidad cada vez que la unidad de medida, que es un estado cambie su valor:

useEffect(()=>{
    if (unidadVelocidad === "mph") {
      setVelocidadFinal(velocidadIn * 1.60934)
    } else if (unidadVelocidad === "kts") {
        setVelocidadFinal(velocidadIn * 1.852)
    } else {
        setVelocidadFinal(velocidadIn)
    }
  },[velocidadIn,unidadVelocidad]);

Finalmente, se especifica que se compute el tiempo de vuelo cada vez que el componente se actualice y que además, haya algún cambio de estado para tiempoDeVuelo, distanciaFinal o velocidadFinal respectivamente.

useEffect(()=>{
    const resultadoHs = (distanciaFinal / velocidadFinal).toFixed(2)
    const resultadoMins = (resultadoHs * 60).toFixed(2)
    if (resultadoMins === "NaN" || resultadoHs === "NaN") {
        setTiempoDeVuelo("");
    } else {
        setTiempoDeVuelo(`${resultadoHs} HS (${resultadoMins} min)`);
    }
  },[tiempoDeVuelo,distanciaFinal,velocidadFinal])

Demo:

function App(){
  const [tiempoDeVuelo, setTiempoDeVuelo] = React.useState(0)

  const [velocidadIn, setVelocidadIn] = React.useState("Velocidad")
  const [distanciaIn, setDistanciaIn] = React.useState("Distancia")

  const [unidadVelocidad, setUnidadVelocidad] = React.useState("kmh")
  const [unidadDistancia, setUnidadDistancia] = React.useState("km")
  
  const [velocidadFinal, setVelocidadFinal] = React.useState(0)
  const [distanciaFinal, setDistanciaFinal] = React.useState(0)
  
  function tomarVelocidad_(event) {
    event.preventDefault()
    setVelocidadIn(event.target.value);
  }

  React.useEffect(()=>{
    if (unidadVelocidad === "mph") {
      setVelocidadFinal(velocidadIn * 1.60934)
    } else if (unidadVelocidad === "kts") {
        setVelocidadFinal(velocidadIn * 1.852)
    } else {
        setVelocidadFinal(velocidadIn)
    }
  },[velocidadIn,unidadVelocidad]);

  function tomarDistancia_(event) {
    event.preventDefault()
    setDistanciaIn(event.target.value);
  }

  React.useEffect(()=>{
    if (unidadDistancia === "mi") {
      setDistanciaFinal(distanciaIn * 1.60934)
    } else if (unidadDistancia === "nm") {
        setDistanciaFinal(distanciaIn * 1.852)
    } else {
        setDistanciaFinal(distanciaIn)
    }
  },[distanciaIn,unidadDistancia]);

  React.useEffect(()=>{
    const resultadoHs = (distanciaFinal / velocidadFinal).toFixed(2)
    const resultadoMins = (resultadoHs * 60).toFixed(2)
    if (resultadoMins === "NaN" || resultadoHs === "NaN") {
        setTiempoDeVuelo("");
    } else {
        setTiempoDeVuelo(`${resultadoHs} HS (${resultadoMins} min)`);
    }
  },[tiempoDeVuelo,distanciaFinal,velocidadFinal])
  
  function manipularVelocidad(event) {
    event.preventDefault()
    setUnidadVelocidad(event.target.value)
  }

  function manipularDistancia(event) {
    event.preventDefault()
    setUnidadDistancia(event.target.value)
  }
  return (
      <div className="modal-fondo-herramienta">
        <div className="contenedor-herramientas">
            
            <div>
                <div className="prueba">
                    <form>
                        <p>Velocidad</p>
                        <input type='text' name={velocidadIn} value={velocidadIn} placeholder='Velocidad' onChange={tomarVelocidad_} />

                        <button className={unidadVelocidad === "kmh" ? "botones-herramientas activo" : "botones-herramientas"} value="kmh" onClick={manipularVelocidad}>KM</button>
                        <button className={unidadVelocidad === "mph" ? "botones-herramientas activo" : "botones-herramientas"} value="mph" onClick={manipularVelocidad}>MI</button>
                        <button className={unidadVelocidad === "kts" ? "botones-herramientas activo" : "botones-herramientas"} value="kts" onClick={manipularVelocidad}>KT</button>
                        <p>Distancia</p>

                        <input type='text' name={distanciaIn} value={distanciaIn} placeholder='Distancia' onChange={tomarDistancia_} />

                        <button className={unidadDistancia === "km" ? "botones-herramientas activo" : "botones-herramientas"} value="km" onClick={manipularDistancia}>KM</button>
                        <button className={unidadDistancia === "mi" ? "botones-herramientas activo" : "botones-herramientas"} value="mi" onClick={manipularDistancia}>MI</button>
                        <button className={unidadDistancia === "nm" ? "botones-herramientas activo" : "botones-herramientas"} value="nm" onClick={manipularDistancia}>NM</button>
                    </form>
                </div>
                <div>
                    Tiempo estimado de vuelo: {tiempoDeVuelo}
                </div>
            </div>
        </div>
      </div>
  );
}


ReactDOM.render(<App/>, document.getElementById('root'))
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin ></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin ></script>

<div id="root"></div>

Notas de campo

  • Se usó practicamente toda la lógica propuesta por el OP, solo se modificó el comportamiento del componente con estados y useEffect.

  • La propuesta original no estaba aprovechando la fase componentDidUpdate del ciclo de vida del componente, la cual se puede usar mediante el hook useEffect en su modo Skipping Effects.

  • Sugiero dar una revisión al uso de useEffect para escuchar por cambios de estado.

Espero que esta respuesta sea de ayuda.

1
  • 1
    Funciona perfecto! un millón de gracias muy bien explicado todo!
    – pilki
    Commented el 19 ene. 2022 a las 19:28

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.