React Infinite 滚动组件无法正常工作

Question

I am using react-infinite scroll component like this:

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>
)

I only get LOADING... on my browser. But when I write my next as next={fetchDataOnScroll()} , It renders continuously until the page freezes. I have to close my browser.

How can i fix this?

Answer 1

I suggest using useEffect and change page in next function. I think this make some amount of delay that allow infinite scroll render current component. This code solve my problem.

<InfiniteScroll
   ...
   next={setPage(page+1)}
...>

And in useEffect function after changing page you can call api

useEffect(() => {
fetchDataOnScroll()
},[page]