Implementé un desplazamiento infinito para obtener más datos cada vez que el usuario llega al final de la página. Parece funcionar bien, pero tengo una condición especial.
Cuando la página se muestra por primera vez, recibo la respuesta como:
count: 47 next: "http://localhost:8000/api/user/groups/56/users/?limit=20&offset=20" previous: null results: [{id: "79", email: "priyanka+LarryLo@emembler.com", first_name: "Larry", last_name: "Lo",…},…]Donde count representa la cantidad total de elementos en la matriz, en el límite de cadena "siguiente" se establece en 20, lo que significa que obtengo el máximo de 20 elementos para cada llamada api y offest muestra que, para obtener los siguientes elementos, tengo que compensar "20" en la próxima llamada api. Una vez que se obtengan todos los datos, el valor "siguiente" será nulo, por lo que hice una condición como si el valor "siguiente" fuera nulo, no llame a la API, pero se da la llamada a la API.
Código reductor para almacenar datos que se están recuperando:
case GET_MEMBERS_OF_GROUP: { newState["nextMembers"] =action.payload.response.next; if (action.payload.response.results) { let newArray = newState["members"].concat( action.payload.response.results ); newState["members"] = newArray; } else { newState["members"] = action.payload.response.results; } if(action.payload.page == 0){ newState["members"] = action.payload.response.results } return newState; }Tengo otro reductor para actualizar el desplazamiento que se proporcionará a la próxima llamada a la API:
case SHOW_NEXT_MEMBERS: { newState["pageOfmembers"] = newState["pageOfmembers"] + action.payload.nextMembers; return newState; }Implementación de desplazamiento infinito, donde el desplazamiento no se incrementa y también cuando el valor "siguiente" es una llamada api nula:
const [nextmembers, setNextmembers] = useState() useEffect(() => { setNextmembers(data.nextMembers) },[data.nextMembers]) useEffect(() => { const event = window.addEventListener('scroll', () => { if ((window.innerHeight + window.scrollY) == document.body.scrollHeight ) { if(nextmembers&& window.location.href.includes("/members")){ dispatch({ type: SHOW_NEXT_MEMBERS, payload: { nextMembers: 20, }, }) setTimeout(() => { dispatch(EMDoGetMembersOfGroupAction({id:data.singleGroup.id ? data.singleGroup.id : window.sessionStorage.getItem("GroupId"), limit:data.pageOfmembers})) },500) } } }) return () => window.removeEventListener('scroll', event); }, [nextmembers])Entonces, esta puede no ser la solución completa, pero parte del problema es cómo usa addEventListener y removeEventListener. Debe almacenar la función de manejo de eventos en una variable y luego usar esa variable con addEventlistener y removeEventListener.
const [nextmembers, setNextmembers] = useState() useEffect(() => { setNextmembers(data.nextMembers) },[data.nextMembers]) const handleScroll = useCallback(() => { // all the logic in that anonymous function goes here if ((window.innerHeight + window.scrollY) == document.body.scrollHeight ){ // ... } }, [!!nextMembers]) useEffect(() => { window.addEventListener('scroll', handleScroll) return () => window.removeEventListener('scroll', handleScroll) }, [handleScroll])