Estoy creando una aplicación MERN y muestro una lista de publicaciones a los usuarios, así que implementé el desplazamiento infinito, pero noté que si elimino la última publicación antes de que esté completamente a la vista, el desplazamiento infinito no se ejecutará.

 const [page, setPage] = useState(1); const observer = useRef(); const query = useQuery(); const t = !query.get("type") ? "images" : query.get("type"); const postCallbackRef = useCallback( (node) => { if (loading) return; if (observer.current) observer.current.disconnect(); observer.current = new IntersectionObserver( (entries) => { if (entries[0].isIntersecting && hasMore) { postsLoading(); // console.log(entries[0].target); getInfinitePosts(t, "", page + 1); setPage(page + 1); } }, { root: null, threshold: 0.5, rootMargin: "0px", } ); if (node) observer.current.observe(node); }, [loading, hasMore, getInfinitePosts, page, t, postsLoading] ); useEffect(() => { setPage(1); getPosts(t); }, [t, getPosts, setPage]); const renderedPosts = posts.map((post, i) => post === null ? null : (i + 1 === posts.length && ( <section ref={postCallbackRef}> <Post key={post._id} t={t} post={post} /> </section> )) || <Post key={post._id} t={t} post={post} /> );

Como puede ver, solo estoy configurando la referencia a la última publicación, por lo que si se elimina antes de cargar las nuevas publicaciones, no se cargarán más publicaciones. getPosts es una función para obtener las publicaciones según el tipo de publicaciones especificadas (imágenes, blogs, vlogs) getInfinitePosts es la función principal de carga de publicaciones. Estoy usando redux. Usequery es un enlace personalizado para informarme sobre la consulta desde la URL. Es el tipo de publicación, por defecto son imágenes. loading y hasMore son del estado redux.

Para resumir, el desplazamiento infinito funciona bien, pero si elimino la última publicación antes de llamar a getInfinitePosts, nunca se llama a getInfinitePosts. Una solución que se me ocurre es pasar la función getInfitePosts, el número de página, la función setPage y isLast (valor booleano, ya sea que el elemento sea el último elemento o no) al elemento de publicaciones como accesorios y luego hacer

 if (isLast){ <button class="delete-button" onclick={()=>{ deletePost(post._id); getInfinitePosts(page+1); setPage(page+1); }}></button> }

pero parece un poco tonto, así que sugiera lo que debo hacer.