Estoy usando el desplazamiento infinito en mi aplicación reaccionar/redux y cuando el usuario se acerca al final de la página, se cargarán más contenidos.

Pero si el usuario se desplaza demasiado rápido y sigue desplazándose mientras se obtiene el contenido del servidor, la función responsable del efecto de desplazamiento se activa varias veces y la API obtiene el mismo contenido, y esto provoca errores porque se mostrarán los mismos elementos con claves idénticas. cargado.

 const [isFetching, setIsFetching] = useState(false); // Fire Upon Reaching the Bottom of the Page const handleScroll = () => { if ( window.innerHeight + Math.max( window.pageYOffset, document.documentElement.scrollTop, document.body.scrollTop ) > document.documentElement.offsetHeight - 100 ) { setIsFetching(true); } else { return; } }; // Debounce the Scroll Event Function and Cancel it When Called const debounceHandleScroll = debounce(handleScroll, 500); useEffect(() => { window.addEventListener("scroll", debounceHandleScroll); return () => window.removeEventListener("scroll", debounceHandleScroll); }, [debounceHandleScroll]); debounceHandleScroll.cancel(); // Get More Posts const loadMoreItems = useCallback(() => { dispatch(getMorePosts(moreApiAddress)); setIsFetching(false); }, [dispatch, moreApiAddress]); useEffect(() => { if (!isFetching) return; loadMoreItems(); }, [isFetching, loadMoreItems]);

Así es como se llama al envío si el usuario continúa desplazándose por la parte inferior de la página antes de que se obtenga el contenido anterior:

También puede ver el problema en la aplicación en vivo: https://reddix.netlify.app/

¿Hay alguna forma de detener esa función para que se active varias veces cuando se obtiene contenido nuevo y/o el usuario se desplaza demasiado rápido?