Estoy mostrando una lista de usuarios (perfiles) y la obtengo de la base de datos de algunos usuarios. Estoy en la página de búsqueda que incluye subpáginas para diferentes filtros, como qué usuarios están actualmente en línea. Cada vez que me muevo dentro de las subpáginas de búsqueda, tengo que restablecer solo una vez la variable de filtrado principal para obtener el resultado correcto. El problema es que la solicitud de recuperación sucedió antes de que cambiara la variable setState. Vi que otras personas me preguntaron cómo buscar después, mientras que primero necesito restablecer las variables de setState y luego ir y buscar de acuerdo con los valores correctos.
const [isPopUpShowState,setIsPopUpShowState] = useState(false); const [profilesloading,setProfilesLoading] = useState(<Spinner/>); const [profilesLength,setProfilesLength] = useState(0); const [profilesPerPage] = useState(4); const [searchStartPoint,setSearchStartPoint] = useState(0); const [lastUserConnIndex,setLastUserConnIndex] = useState(1); useEffect( ()=> { restoreStatesToDefault(); // reset states+list --> the variables doesnt changed before the the fetch getProfilesMatchingPage(); // init profiles },[history.location.pathname]); const restoreStatesToDefault = () => { list = {}; setSearchStartPoint(0); setLastUserConnIndex(1); setProfilesLength(0); } const getSearchProfilesParmsInObj = () => { const parmsObj = {}; if(currUser.loginObj){ parmsObj['isMale'] = !currUser.loginObj.data.isMale; parmsObj['profilesPerPage'] = profilesPerPage; parmsObj['searchStartPoint'] = searchStartPoint; parmsObj['lastUserConnIndex'] = lastUserConnIndex; parmsObj['allProfiles'] = list; } return parmsObj; } const getProfilesMatchingPage = () => { switch(history.location.pathname){ case '/search/online': dispatch(getProfilesOnline(getSearchProfilesParmsInObj(),setProfilesLoading,setLastUserConnIndex,setProfilesLength)); break; case '/search/pics': dispatch(getProfilesOnlyWithPics(getSearchProfilesParmsInObj(),setProfilesLoading,setLastUserConnIndex,setSearchStartPoint,setProfilesLength)); break; case '/search/recently': dispatch(getProfilesRecentlyVisited(getSearchProfilesParmsInObj(),setProfilesLoading,setLastUserConnIndex,setSearchStartPoint,setProfilesLength)); break; case '/search/news': dispatch(getProfilesNewUsersRegistered(getSearchProfilesParmsInObj(),setProfilesLoading,setLastUserConnIndex,setSearchStartPoint,setProfilesLength)); } }El problema es que ambas funciones se llaman dentro del mismo ciclo de vida de la función, por lo que los estados aún no se han actualizado (están dentro del mismo closure ). Una vez que finaliza su useEffect , se llama al siguiente procesamiento con los valores de estado actualizados, pero no son dependencias de su useEffect , por lo que no lo activan para que se active nuevamente (lo cual es algo bueno en este caso).
Básicamente, lo que desea son dos useEffect -> uno se activa en el cambio de ruta, y ese debe actualizar el estado que es una dependencia de otro useEffect que activa la búsqueda.
Un ejemplo sencillo sería:
const [shouldFetch, setShouldFetch] = useState(false) // Set this to true if you want to fetch on initial render useEffect( ()=> { restoreStatesToDefault(); // reset states+list --> the variables doesnt changed before the the fetch setShouldFetch(true); },[history.location.pathname]); useEffect(() => { if (shouldFetch) { setShouldFetch(false); getProfilesMatchingPage(); // init profiles } }, [shouldFetch])