function LoginComponent(){ const [clicked, setClicked] = useState(false) function handleClick(){ console.log('before', clicked) setClicked(true) console.log('after', clicked) } return( <a onClick={handleClick}> random text </a> ) }Cuando ejecuto esto, la consola muestra antes de falso después de falso. ¿Por qué es esto? No tengo ni idea de por qué este comportamiento es así.
Porque establecer el estado es una acción asíncrona. Se necesita un tiempo para actualizar. Verifique el enlace de documentación de reacción para saber más
Puede comprobar el valor actualizado por
useEffect(()=> { console.log("clicked", clicked); },[clicked]);Hay un par de razones para este comportamiento:
Si desea registrar el valor actualizado de clicked , coloque la declaración de registro en el useEffect .
No puede actualizar y registrar el valor actualizado de cualquier variable de estado en el mismo renderizado. El componente tendrá que volver a renderizarse para reflejar los cambios debido a la actualización de estado.
De manera similar, si desea llamar a una función con el valor actualizado de clicked , llame a la función desde dentro del gancho useEffect .
setClicked es asíncrono. Debe verificar el estado actualizado en useEffect
function LoginComponent(){ const [clicked, setClicked] = useState(false) function handleClick(){ setClicked(true) } useEffect(() => { console.log(clicked); },[clicked]) return( <a onClick={handleClick}> random text </a> ) }