Estoy tratando de obtener datos de una API y almacenarlos en setData(response.data) . Luego estoy tratando de empalmar esos datos en un nuevo estado llamado elementos. Así que hago setItems(data.events?.splice(lastPage, firstPage));
De alguna manera, mi matriz de elementos inicialmente siempre está vacía, necesito actualizar el sitio para obtener la información. Estoy usando un estado de carga para eso, pero por alguna razón mis elementos no actualizan su estado. este es el codigo
const [data, setData] = useState([]); const [isLoading, setIsLoading] = useState(true); const [items, setItems] = useState([]); const [page, setPage] = useState(1); const EVENTS_PER_PAGE = 10; const firstPage = page * EVENTS_PER_PAGE; const lastPage = firstPage - EVENTS_PER_PAGE; useEffect(() => { getEvents() .then(function (response) { setData(response.data); setItems(data.events?.splice(lastPage, firstPage)); }) .catch(function (error) { setError(error); }) .finally(function (response) { setIsLoading(false); }); }, []);JSON: https://www.mockachino.com/c31972ec-27f7-45/events
Intenté todo pero no puedo hacer que funcione, cualquier ayuda es apreciable
Cuando intenta poner datos en estado, no puede acceder a su nuevo valor en el mismo useEffect.
Lo que puedes hacer es:
useEffect(() => { getEvents() .then(function (response) { setData(response.data); }) .catch(function (error) { setError(error); }) .finally(function (response) { setIsLoading(false); }); }, []); useEffect(() => { setItems(data.events?.splice(lastPage, firstPage)); }, [data, lastPage, firstPage]) El segundo efecto de uso se activará cuando cambie la matriz [data] .
1=> no mostrar la página hasta que isLoading sea falso, algo así como
return isLoading ? ( <> spinner or some else < /> ) : ( <> your page </>de esa manera, su página no se procesará hasta que se carguen los datos.
2 => también intente agregar la variable isLoading a la matriz de dependencia para que la página se vuelva a mostrar cuando cambie isLoading