No puedo acceder a mi estado actualizado en una función. Aquí está mi escenario:

Tengo una función getImages() que se llama cuando el componente se carga por primera vez o cuando el usuario llega al final de la página mientras se desplaza para obtener nuevas imágenes a través de una llamada a la API. En la primera carga del componente, quiero dar el valor de la página aleatoria, por eso paso un número aleatorio desde el primer enlace useEffect y cuando el usuario llega al final de la página, quiero usar el estado pageNum. Pero cada vez que llega al final de la página, el valor de pageNum aparece como 0 en la llamada a la API, así como en el registro de la consola. Esperaba el estado de pageNum actualizado cada vez que al final de la función getImages(), el estado de pageNum se incrementa en 1. Revisé las herramientas de desarrollo de reacción y allí el estado de pageNum se está actualizando correctamente.

Aquí está el fragmento de mi código:

El estado de las imágenes se está actualizando correctamente, está haciendo uso del estado existente y agregando nuevas imágenes en cada llamada.

 const [images, setImages] = useState([]); const [pageNum, setPageNum] = useState(0); useEffect(() => { getImages(Math.floor(Math.random() * 100) + 1); }, []); useEffect(() => { window.addEventListener("scroll", () => { if((window.innerHeight + window.scrollY) === document.body.scrollHeight){ getImages(); } }); }, []); async function getImages(pageNo){ let response; console.log(pageNum); if(pageNo === undefined){ response = await fetch(`<API URL>&page=${pageNum}`); } else{ response = await fetch(`<API URL>&page=${pageNo}`); } const data = await response.json(); setImages(function(currentState){ return [...currentState, ...data]; }); setPageNum(function(currentState){ return currentState + 1; }); }

Por favor, avíseme si me estoy perdiendo algo.