Estoy tratando de hacer un convertidor simple de px a rem en React. Pero el valor de la variable rem no cambia cuando cambia el valor de px . Aquí está el código:
import React, { useState } from "react"; import "./App.css"; function App() { const [pixel, setPixel] = useState(0); const [rem, setRem] = useState(0); return ( <div className="app"> <div className="header"> <h1>PX To REM Converter</h1> </div> <div className="conversion"> <div className="value"> <form action="" className="form"> <input type="text" name="px" placeholder="PX" onChange={(e) => setPixel(e.target.value) && setRem(e.target.value / 16)} /> </form> </div> <div className="answer"> <p>{rem} REM</p> </div> </div> </div> ); } export default App;setState() siendo un setter no devuelve nada. Dado que no devuelve nada, setPixel(e.target.value) evalúa como undefined y, por lo tanto, la parte posterior a && no se ejecuta. Así es como funciona && (AND lógico).
AND lógico (&&) evalúa los operandos de izquierda a derecha, regresando inmediatamente con el valor del primer operando falso que encuentra; si todos los valores son verdaderos, se devuelve el valor del último operando.
Puedes hacerlo:
onChange={(e) => { setPixel(e.target.value); setRem(e.target.value / 16); }}Es solo un pequeño error al llamar a los setters de su estado. Estás llamando bien a setPixel , pero setRem se está llamando a setRem. Es un error muy común que la gente comete (¡incluyéndome a mí!).
Por ejemplo, no puedo decirte cuántas veces he escrito una declaración if como:
if (typeof value === 'string' && value2 === 'number') ... Olvidar que usar el operador && no significa que no tenga que volver a declarar lo que quiere hacer.
El fragmento de código anterior, por supuesto, debería ser:
if (typeof value === 'string' && typeof value2 === 'number') ...Entonces, para usted, solo necesita envolver sus setters en una llamada de función:
onChange={(e) => { setPixel(e.target.value); setRem(e.target.value / 16); }}¡Y deberías estar listo!