Hola amigos, espero que alguien me pueda ayudar con un problema. Creé una función que recupera las publicaciones de los usuarios desde el backend y las devuelve como respuesta:

 const [posts, setPosts] = useState([]); const newsFeed = async () => { await axios .post(`${process.env.REACT_APP_API}/news-feed`) .then((res) => { setPosts(res.data); }) .catch((err) => { console.log(err); }); };

useEffect llama a esta función y también cada vez que se envía una publicación, le gusta, se comenta, etc., de modo que las publicaciones de los usuarios siempre se vuelven a procesar cada vez que se modifican o agregan.

Funcionaba bien hasta que decidí implementar Infinite Scroll en mi aplicación. Instalé el paquete npm react-infinite-scroll-component y modifiqué mi función para que se vea así:

 const [posts, setPosts] = useState([]); const [page, setPage] = useState(1); const newsFeed = async () => { await axios .post( `${process.env.REACT_APP_API}/news-feed/${page}`) .then((res) => { let newPosts = posts; newPosts = newPosts.concat(res.data); setPosts(newPosts); setPage(page + 1); }) .catch((err) => { console.log(err); }); };

El desplazamiento infinito funciona bien, pero ahora las publicaciones no se vuelven a mostrar cada vez que se llama a esta función y, en cambio, necesito actualizar la página para ver los cambios. Intenté restablecer el estado de la page a 1 nuevamente en mis funciones postSubmit / likeHandler , pero esto no tuvo ningún efecto. No veo ningún error en la consola, así que no estoy seguro de lo que está pasando.