Not able to scroll and get the new results

[rexyou0831]

Hi there,

I'm new to use this library, just wondering why my side next props not working to get the next page, am I doing wrong?

` const Results = () => {

const [ responseData, setresponseData ] = useState([]);
const [ page, setPage ] = useState(1);
const [ totalPage, setTotalPage ] = useState(1);
const [ totalLength, setTotalLength ] = useState(0);
const [loading, setLoading] = useState(false);

const fetchData = async () => {

    if (loading) return;
    setLoading(true);

    try {
        await axios.get(`http://sampleurl/api/?page=${ page }`)
        .then((response)=>{
            console.log(response.data.users)
            setresponseData(prev => [...prev, ...response.data.users.data]);
            setTotalLength(response.data.users.total)
            setTotalPage(response.data.users.last_page)
            setPage( page + 1 )
        })   
    } catch (error) {
        console.log(error)
    } finally {
        setLoading(false);
    }

};

useEffect(()=>{

    fetchData()

}, [])

return (
    <div className=' w-5/6 mx-auto mt-10 h-full overflow-auto' id="scrollableDiv">

        <InfiniteScroll 
            dataLength={ totalLength } 
            next={ fetchData } 
            hasMore={ true }
            isLoading={loading}
            scrollableTarget="scrollableDiv"
        >
            <ResponseList responseData={responseData}/>
        </InfiniteScroll>

        <div className=' fixed w-12 h-12 bg-black bottom-44 right-0 rounded-tl-lg rounded-bl-lg text-white flex items-center justify-center'>
            <FaSearch className='text-2xl' />
        </div>

        <div className=' fixed w-12 h-12 bg-black bottom-28 right-0 rounded-tl-lg rounded-bl-lg text-white flex items-center justify-center'>
            <FaFilter className='text-2xl' />
        </div>

        <div className=' fixed w-12 h-24 bg-black bottom-0 right-0 rounded-tl-lg text-white flex flex-col text-center text-md items-center justify-center'>
            <span>{ page }</span>
            <span>----</span>
            <span>{ totalPage }</span>
        </div>
    </div>
)`

[mehmood-v]

facing the same issue

[dustyjay]

same here. has there been any update on this?

[dustyjay]

i found a solution to mine. turns out i was passing the wrong value to the dataLength prop

dataLength should carry the value of the last_page in your case and not the total length @rexyou0831

<InfiniteScroll
  hasMore={true}
  next={() => fetchMoreData()}
  dataLength={orders.length}
  loader={<p className="text-center mt-8">Loading more orders...</p>}
  endMessage={<p className="text-center mt-8">End of list</p>}>
    <LiveTripCards orders={orders} />
</InfiniteScroll>

[rexyou0831]

hi @dustyjay thanks for the suggestion but my side found out that I need to separate the axios function call The height also causing the problems not continue call API. Here is my current solution sample

https://github.com/rexyou0831/react_infinite_scroll/blob/test_1/src/App.js