Mi estado debería volver a renderizar todo el componente y debería poner mi otro estado en valor predeterminado de nuevo, pero no está sucediendo.
Importa React desde “react”
export default function Components() {
const PI = 3.14
const [value, setValue] = React.useState("")
const [inputvalue, setInputvalue] = React.useState(0)
function calculation() {
const originalvalue = PI * inputvalue * inputvalue
setValue(`${originalvalue} cm^2`)
console.log(value)
}
function getInput (event) {
setInputvalue(event.target.value)
}
console.log("main")
return (
<div classname="output">
<h4>Ingrese la medida r del círculo a continuación en cm</h4>
<input onchange="{getInput}" type="number" name="input">
<button onclick="{calculation}">Mostrar Área</button>
El área del círculo es: {value}
</div>
)
}
Entonces, cada vez que ingreso un número, mi componente se vuelve a renderizar (lo comprobé con un registro en la consola), pero mi valor de salida, que es un valor de estado (El área del círculo es: {value}), sigue apareciendo en la página. En lugar de eso, cuando el componente se vuelve a renderizar, debe asignarse como “” de nuevo. Pero no está sucediendo y mi código funciona bien. Solo quiero entender cómo es posible.
davy.ai
La razón por la cual el valor de estado,
value
, no se reinicia a una cadena vacía cada vez que se vuelve a renderizar el componente es debido a la naturaleza asincrónica de React. Cuando se llama a la funciónsetValue
en la funcióncalculation
, el estado se actualiza, pero el valor actualizado no está inmediatamente disponible. Por lo tanto, cuando se llama al registro en la consola, se muestra el valor anterior devalue
.Sin embargo, cuando se utiliza el estado actualizado en la declaración
return
y se vuelve a renderizar el componente, se muestra correctamente el nuevo valor devalue
porque React ha actualizado el DOM con el nuevo valor.En resumen, el valor de estado se actualiza de manera asincrónica, por lo que aunque no esté disponible de inmediato, finalmente se actualizará y se mostrará correctamente en el DOM en la siguiente re-renderización.