Al inicio, estoy cargando los datos en useEffect así:
const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(12); useEffect(() => { const loadVehicles = async (dealershipId, id) => { try { const data = await getUserRequests(dealershipId, id, { offset: (page - 1) * perPage, limit: perPage, }); setRequests(data.results); } catch (err) {} }; const loadUser = async (userId) => { try { const user = await getUserById(userId); setSelectedUser(user); } catch (err) {} }; const loadData = async () => { setIsLoading(true); await loadVehicles(dealershipId, userId); await loadUser(userId); setIsLoading(false); }; loadData(); }, [dealershipId, page, perPage, userId]);Aquí, en la matriz de dependencias, tengo "página" y "por página", que son para la paginación de vehículos. Cuando voy, por ejemplo, a la segunda página:
const changePageHandler = (pageNumber) => { setPage(pageNumber); }; la page se está actualizando, y luego useEffect está llamando. Pero el problema es que solo quiero llamar a loadVehicles() y no a la función loadUser() .
Y cuando pongo loadVehicles(dealershipId, userId) fuera de useEffect, y luego la llamo después de setPage(pageNumber) , no está obteniendo la página correcta, porque la page aún no está actualizada.
¿Cómo puedo llamar solo a loadVehicles() con la página correcta?
Debe usar otro enlace "useEffect" para manejar los cambios de página. También es mejor definir sus funciones fuera de sus ganchos para que pueda usarlas también en otros lugares.
const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(12); const loadVehicles = async (dealershipId, id) => { try { const data = await getUserRequests(dealershipId, id, { offset: (page - 1) * perPage, limit: perPage, }); setRequests(data.results); } catch (err) {} }; const loadUser = async (userId) => { try { const user = await getUserById(userId); setSelectedUser(user); } catch (err) {} }; const loadData = async () => { setIsLoading(true); await loadVehicles(dealershipId, userId); await loadUser(userId); setIsLoading(false); }; useEffect(async() => { await loadData(); }, [dealershipId, userId]); useEffect(async() => { setIsLoading(true); await loadVehicles(dealershipId, userId); setIsLoading(false); }, [page, perPage]);Estoy bastante seguro de que entenderás el concepto. El código anterior es solo una pista.