Estoy usando un componente de desplazamiento infinito de reacción como este:
const [hasMore, setHasMore] = useState(true) const [pageNumber, setPageNumber] = useState(1) const fetchDataOnScroll = async () => { try { const res = await axios.get( `${process.env.REACT_APP_API}/api/v1/posts?page=${pageNumber}` ) (res.data.doc.length === 0) setHasMore(false) setPosts((prev) => [...prev, ...res?.data?.doc]) setPageNumber((prev) => prev + 1) } catch (error) { alert('Error fetching Posts') console.log('ERROR', error.data.response) } } return ( <InfiniteScroll hasMore={hasMore} next={fetchDataOnScroll} endMessage='No More Post' dataLength={posts.length} loader={<h1>LOADING...</h1>} > {posts.map((post) => ( <FeedCard key={post._id} post={post} /> ))} </InfiniteScroll> ) Solo obtengo CARGANDO... en mi navegador. Pero cuando escribo mi siguiente como next={fetchDataOnScroll()} , se procesa continuamente hasta que la página se congela. Tengo que cerrar mi navegador.
¿Cómo puedo arreglar esto?
Sugiero usar useEffect y cambiar la página en la siguiente función. Creo que esto genera una cierta cantidad de retraso que permite que el desplazamiento infinito represente el componente actual. Este código resuelve mi problema.
<InfiniteScroll ... next={setPage(page+1)} ...>Y en la función useEffect después de cambiar de página, puede llamar a api
useEffect(() => { fetchDataOnScroll() },[page]