useEffect(() => { resetState(); if (page === 'ADMISSION') { fetchAdmissionKitPosts(); } else if (page === 'WEEKLY') { fetchWeeklyKitPosts(); } else if (page === 'FESTIVAL') { fetchFestivalKitPosts(); } }, [page]);Entonces quiero hacer diferentes llamadas API basadas en la variable de página. Tengo que restablecer el estado antes de hacer esas llamadas. Pero mientras hago la llamada obtengo el estado anterior. Me di cuenta de que setState en reaccionar es de naturaleza asíncrona, así que asumo que es por eso que obtengo el estado anterior en las funciones de llamada API.
Entonces, mi pregunta es, ¿cómo puedo hacer que estas llamadas API solo se ejecuten después de que se haya restablecido el estado?
Sé que puedo usar una función de devolución de llamada en el componente basado en clases con la función setState. Pero quiero mantener este componente funcional.
Puede implementar la devolución de llamada setState en el componente funcional con useEffect . si lo estoy haciendo bien, está utilizando dos páginas de variables de estado y publicaciones , si este es el caso, debe usar dos métodos useEffect como este:
useEffect(() => { if(page !== ''){ setMarketingPosts([]) } }, [page]); useEffect(() => { if (page === 'ADMISSION') { fetchAdmissionKitPosts(); } else if (page === 'WEEKLY') { fetchWeeklyKitPosts(); } else if (page === 'FESTIVAL') { fetchFestivalKitPosts(); } setNextPageToken('') }, [post]);