Todos, aquí está mi código sucio.
const parseJson = async value => { try{ const parsedData = await JSON.parse(value); console.log('2', parsedData); return parsedData; }catch(e){} } const getAuthStateData = async () => { try{ const storedAuthData = await AsyncStorage.getItem('authState'); console.log('1', storedAuthData); return storedAuthData != null ? parseJson(storedAuthData) : null; }catch(e){} } useEffect(() => { const authStateData = getAuthStateData(); console.log('3', authStateData); }, [])El orden de estado esperado de la consola es
1, 2, 3El orden del estado real de la consola es
3, 1, 2El authState tiene demasiados datos. así que obtenerlo de Asyncstorage (si no está familiarizado con él, puede asumirlo como localstorage) lleva algún tiempo, y también analizarlo a json toma 500 ms. así que tengo que esperar a todos ellos. Esto es básico del concepto de javascript: asíncrono, sincronización, promesa. ¡Por favor ayúdenme, mayores!
No está await la llamada a getAuthStateData en su devolución de llamada useEffect , por lo que se ejecuta de forma asíncrona, y el resto de la devolución de llamada continúa ejecutándose de forma sincrónica hasta que el tiempo de ejecución tiene tiempo para ejecutar las otras tareas que le ha asignado.
Creo que quisiste escribir esto en su lugar:
useEffect(async () => { const authStateData = await getAuthStateData(); console.log('3', authStateData); }, []);El problema principal es la await que falta antes getAuthStateData() , pero también faltan algunas dependencias y limpieza. Ver comentarios en línea:
const parseJson = (value) => { //not async -- see next comment try{ const parsedData = JSON.parse(value); //JSON.parse is not an async method, so there's no reason to await here console.log('2', parsedData); return parsedData; }catch(e){ console.error(e); } } const _getAuthStateData = async () => { try{ const storedAuthData = await AsyncStorage.getItem('authState'); console.log('1', storedAuthData); return storedAuthData != null ? parseJson(storedAuthData) : null; }catch(e){ console.error(e); } } //get a memoized version of the callback const getAuthStateData = React.useCallback(_getAuthStateData,[]) useEffect(() => { async function asyncFunc() { const authStateData = await getAuthStateData(); console.log('3', authStateData); } asyncFunc(); //prevent a linter error about using an `async` function directly inside `useEffect` by wrapping an async function and calling it },[getAuthStateData]) //because we use getAuthStateData, it should be a dependency -- that's why we memoized it above