Estoy tratando de crear una calculadora básica de pies cuadrados usando React State y me encuentro con algo que no había visto antes. Estoy seguro de que es algo de lo que no soy pervertido todavía, pero me gustaría saber si esto se espera o no.
Mi objetivo aquí es cuando un usuario ingresa un precio que me gustaría calcular en tiempo real. Hasta ahora, es capaz de hacer esto. SIN EMBARGO, cuando cargo la página por primera vez e ingreso un conjunto de números, por ejemplo, 5 de ancho y 5 de largo, obtengo NaN impreso en la consola. Solo después de ingresar un segundo número como 55 y 55, hará el cálculo y lo imprimirá en la consola.
Sospeché que tiene algo que ver con el estado inicial, así que en lugar de useState() lo cambié a useState(0) . En lugar de producir NaN , obtengo 0 impreso en la consola después de cada número que ingreso. Nuevamente, si ingreso 55 y 55 hace el cálculo. ¿Por qué es esto y cómo puedo evitarlo?
const PPSQ = 12; const [width, setWidth] = useState() const [length, setLength] = useState() function calculate() { console.log((width * length) * PPSQ); } function getWidth(val) { setWidth(val.target.value) calculate() } function getLength(val) { setLength(val.target.value) calculate() } <input className="form-control" id="length" name="length" placeholder="Length" type="number" onChange={getLength} autoComplete="off" required /> <input className="form-control" id="width" name="width" placeholder="Width" type="number" onChange={getWidth} autoComplete="off" required />Cuando llama a la función calcular () justo después de establecer ancho () o establecer altura (), obtiene los valores anteriores del estado del componente (intente registrar los valores en el cálculo () para verlo). Lo correcto es esperar hasta que se cambie el estado usando useEffect hook().
function ComponentX() { const PPSQ = 12; const [width, setWidth] = useState(0); const [length, setLength] = useState(0); useEffect( () => { console.log((width * length) * PPSQ); }); function getWidth(val) { setWidth(val.target.value); } function getLength(val) { setLength(val.target.value) } return ( <> <input className="form-control" id="length" name="length" placeholder="Length" type="number" onChange={getLength} autoComplete="off" required /> <input className="form-control" id="width" name="width" placeholder="Width" type="number" onChange={getWidth} autoComplete="off" required /> </>); }Cuando ingresa el primer valor (por ejemplo, 18 en la longitud), el otro valor no se establece (por ejemplo, el ancho).
Por lo tanto, cuando calculate() genera [the length] x [the width] , es igual (en nuestro ejemplo) 18 x 0 que es igual a 0 .
(O podría ser igual a 18 x NaN , dependiendo del valor inicial).
Para solucionarlo, solo puede calcular los valores si los valores no son cero o no son NaN:
const PPSQ = 12; const [width, setWidth] = useState(NaN); // Use NaN const [length, setLength] = useState(NaN); // Use NaN function calculate() { if (!Number.isNaN(width) && !Number.isNaN(length)) { console.log((width * length) * PPSQ); } } function getWidth(val) { setWidth(val.target.value) calculate() } function getLength(val) { setLength(val.target.value) calculate() } <input className="form-control" id="length" name="length" placeholder="Length" type="number" onChange={getLength} autoComplete="off" required /> <input className="form-control" id="width" name="width" placeholder="Width" type="number" onChange={getWidth} autoComplete="off" required />