const initialState={ isLogin: false, userInfo: null, } function App() { const [state, setState]= useState(initialState) useEffect(()=>{ async function fetchUserInfo(){ await initializeUserInfo({state, setState}) // here is the problem console.log(state) } fetchUserInfo() }, []) }
export async function initializeUserInfo({state, setState}){ let cacheName='writinghelper' try{ const cache= await caches.open(cacheName) const isLogin= await cache.match('isLogin') if(isLogin){ if(await isLogin.json()){ const userInfo= await (await cache.match('userInfo')).json() await setState({ ...state, isLogin:true, userInfo: userInfo }) } else{ await setState({ ...state, isLogin:false, userInfo: null }) } } else{ cache.put('isLogin', new Response(false)) cache.put('userInfo', new Response(null)) cache.put('data', new Response(null)) } } catch(e){ console.log(e.message) } }
Hice la función 'initializeUserInfo' y la uso en el gancho 'useEffect'. Utilicé async/await en 'useEffect', así que esperaba que la variable 'state.isLogin' se cambiara a 'true' e imprimiera 'true' en console.log(state). Pero console.log imprime 'falso' una y otra vez. ¿Cuál es el problema?
Nunca verás a useState lanzando el estado actualizado en la siguiente línea en la que actualices el estado. Crea un useEffect para tu 'estado' y console.log(estado) allí. Si su función devuelve verdadero, seguramente verá setState.isLogin en verdadero
useEffect(()=>{console.log(state)},[state]}