Reputation: 11
Hi I had been try to perform infinite scrolling in React JS but i got problem when try to scroll to next page. The next
keyword in infinitescroll
will direct call the API multiple times. Below show as my current code.
// States and call API
const [ responseData, setresponseData ] = useState([]);
const [ page, setPage ] = useState(1);
const [ totalPage, setTotalPage ] = useState(1);
const [ totalLength, setTotalLength ] = useState(0);
const fetchData = useCallback(async () => {
await axios.get(`http://sampleURL/api/?page=${ page }`)
.then((response)=>{
console.log(response.data.users)
// setresponseData(prev => [...prev, ...response.data.users.data]);
setresponseData(responseData.concat(response.data.users.data));
setTotalLength(response.data.users.total)
setTotalPage(response.data.users.last_page)
setPage( page + 1 )
})
}, [ page, responseData ]);
useEffect(()=>{
fetchData()
}, [fetchData])
// Return data
return (
<div className=' w-5/6 mx-auto mt-10 h-full overflow-auto' id="scrollableDiv">
<InfiniteScroll
dataLength={ totalLength }
next={ fetchData }
hasMore={ true }
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>
)
Hope you guys can help with this and I'm not sure where did I done wrong.
Upvotes: 1
Views: 1097