Estoy tratando de paginar (ejecutar una solicitud de API) cuando un usuario se desplaza hasta el final de un div, aunque lo invoca varias veces para el mismo desplazamiento, lo que genera cientos de solicitudes de API para una paginación.
componentDidMount interiorDidMount que tengo,
document.addEventListener('scroll', this.trackScrolling);Que hace esto:
trackScrolling = async () => { const wrappedElement = document.getElementById('profileArea'); if (this.isBottom(wrappedElement)) { await this.paginateProfiles(); } };es inferior:
isBottom(el : any) { return el.getBoundingClientRect().bottom <= window.innerHeight; } También compartiré paginateProfiles :
async paginateProfiles() { if (this.state.profilesPaginating) { return; } await this.setState({ profilesPaginating: true }); var component = this; var page = this.state.profilesNextPage; await axios.get(process.env.REACT_APP_API_URL + '/profiles?amount=8&page=' + page) .then(async (response) => { await component.setState({ profiles: this.state.profiles.concat(response.data), profilesNextPage: this.state.profilesNextPage + 1, profilesPaginating: false, }); }); }Descripción técnica del problema: esto es difícil de explicar o cuál es su causa, pero parece que después de alrededor de 10 paginaciones, de repente entrará en modo spam y enviará alrededor de 50 solicitudes de API y se atascará en la carga. Si me desplazo hacia atrás hasta la parte superior, se detendrán después de unos segundos y no harán más.
Explicación
Ninguna de las soluciones explica que dependen de que la altura de la ventana siempre cambie después de cada detector de eventos. Si su API no devuelve resultados (tal vez se agotó), el controlador de eventos pensará que todavía está inicialmente en la parte inferior ya que no ha cambiado, el detector de eventos se ha vuelto a registrar porque se recuperaron los perfiles pero no se devolvió ninguno.
Solución
Compare las longitudes de los resultados y solo vuelva a agregar el detector de eventos si es != (hubo nuevos registros en la última paginación, por lo que puede haber más).
No es ideal, ya que hace que el detector de eventos se pierda si incluso una solicitud de API no devuelve nada, pero funciona...