Tengo una función asíncrona que obtiene algunos datos de una API. Como necesito esos datos para cargar correctamente mi componente, decidí buscar los datos en useEffect y luego almacenarlos en un useState que funciona bien. Sin embargo, si trato de registrarlo en la consola, solo muestra su estado inicial, lo que técnicamente significaría que aún no está configurado o que el registro de la consola se ejecuta antes de asignar el estado de uso.
Gracias por su ayuda de antemano.
const [categories, setCategories] = useState([]) useEffect(() => { fetchListProductCats().then(function(result){ setCategories(result.data) }) console.log(categories) // returns -> [] }, []); if(!categories.length){ return "loading" }función async con Promise, asegúrese de saber lo que significa.
La línea console.log en este código siempre se ejecuta antes de que se resuelva la Promesa.
Si desea observar el cambio de categorías, use otro useEffect :
useEffect(() => { console.log(categories); }, [categories]);Su estado ya está actualizado con los datos que deseaba que mostraran categorías con sus valores iniciales porque ha representado useEffect sin dependencias. Y se consola antes de ser actualizado. Intente usar los fragmentos de código a continuación para iniciar sesión.
useEffect(() => { console.log(categories) }, [categories]);Reaccionar setState es asíncrono. No se actualizará inmediatamente después de llamar a la función. Primero pasará por un proceso de renderizado para actualizar la interfaz de usuario. Una vez que se haya vuelto a renderizar, se llamará a las funciones proporcionadas en el gancho useEffect .
useEffect(()=>{ console.log(categories) }, [categories])