De como usar useState
Se puede pensar en react state
como una caja negra que persiste cambios de variables de estado. Esta entidad caja, esta en otro espacio de memoria, pero el componente se comunica con ella via useState
;
//reactJS:Dentro del componente
//me comunico con estado userInfo
//de forma asincrónica
// const [state, setState] = useState()
const [userInfo, setUserInfo] = useState({})
Asimismo, para modificar el valor del estado se usa la función set setUserInfo
, la caja negra se puede actualizar.
Sin embargo para poder obtener el valor actual del contenido de dicha caja negra, hay que re-renderizar el componente, ya que el componente y la caja negra no están sincronizados, pero se comunican de forma asincrónica:
fetch('http://localhost:8000/api/login', requestOptions)
.then(response => response.json())
.then(result => {
//API Call side effect
console.log(result) //valor proveniente de otro scope
//no puedo sacarlo de este scope
//hacia el scope del componente
//pero puedo asignar al estado userInfo
//de forma asincrona
//y re-rederizar el componente con dicho valor actualizado
setUserInfo(result);
});
El método setUserInfo
actualiza el estado userInfo
en la caja negra, para despúes re-renderizar el componente, con esto ya se puede leer el último valor del estado userInfo
, pues esta variable de estado recibirá de forma asincrónica, el valor actual de la caja negra en cada re-render:
function App(){
const [userInfo, setUserInfo] = useState({})
useEffect(()=>{
fetch('http://localhost:8000/api/login', requestOptions)
.then(response => response.json())
.then(result => setUserInfo(result));
},[])
console.log("Valor de estado actual userInfo:", userInfo )
return null;
}
Notas de campo
Las llamadas API crean side effects, sugiero leer mas acerca de useEffect.
Con respecto al manejo de estado para el error, sugiero seguir la misma lógica pero esta vez, comunicate con su setState
desde la función fetch->catch