infinite scroll
Hi guys, I'm facing a problem with react-infinite-scroll-component. When I scroll to the bottom the fetchNext func is not called. Can anyone help me?
const WishList = () => {
const [productList, setProductList] = useState<WishListProductResponse>();
const [pagination, setPagination] = useState({
page: 1,
limit: 4,
});
const hasMore =
typeof productList?.totalPages === "number"
? productList.totalPages !== pagination.page
: false;
const fetchNext = () => {
setPagination({
...pagination,
page: pagination.page + 1,
});
};
useEffect(() => {
const loadWishList = async () => {
const result = await callAPIWithToken.get(
"/api/merchant/products/favorite/",
{
params: {
limit: pagination.limit,
page: pagination.page,
},
}
);
if (result.data.success) {
if (!productList?.data) {
setProductList(result.data);
} else {
setProductList({
...result.data,
data: [...productList.data, ...result.data.data],
});
}
}
};
loadWishList();
}, [pagination.page]);
return (
<>
<>
<InfiniteScroll
dataLength={productList?.totalItems}
next={fetchNext}
hasMore={hasMore}
height="100%"
loader={
<LinearProgress
style={{
marginBottom: "20px",
width: "calc(100% - 16px)",
}}
/>
}
>
<Box mb={4}>
<Grid container spacing={2}>
{productList?.data.map((item, index) => (
....
))}
</Grid>
</Box>
</InfiniteScroll>
</>
</>
);
};
export default WishList;
const WishList = () => {
const [productList, setProductList] = useState<WishListProductResponse>();
const [pagination, setPagination] = useState({
page: 1,
limit: 4,
});
const hasMore =
typeof productList?.totalPages === "number"
? productList.totalPages !== pagination.page
: false;
const fetchNext = () => {
setPagination({
...pagination,
page: pagination.page + 1,
});
};
useEffect(() => {
const loadWishList = async () => {
const result = await callAPIWithToken.get(
"/api/merchant/products/favorite/",
{
params: {
limit: pagination.limit,
page: pagination.page,
},
}
);
if (result.data.success) {
if (!productList?.data) {
setProductList(result.data);
} else {
setProductList({
...result.data,
data: [...productList.data, ...result.data.data],
});
}
}
};
loadWishList();
}, [pagination.page]);
return (
<>
<>
<InfiniteScroll
dataLength={productList?.totalItems}
next={fetchNext}
hasMore={hasMore}
height="100%"
loader={
<LinearProgress
style={{
marginBottom: "20px",
width: "calc(100% - 16px)",
}}
/>
}
>
<Box mb={4}>
<Grid container spacing={2}>
{productList?.data.map((item, index) => (
....
))}
</Grid>
</Box>
</InfiniteScroll>
</>
</>
);
};
export default WishList;
0 Replies