ant-design/components/list/demo/infinite-load.tsx
afc163 b79998872a
docs: randomuser.me => mocky.io (#53676)
* docs: move mock api from randomuser.me to mocky.io

* update

* update

* update

* test: update snapshot
2025-04-28 09:47:01 +08:00

77 lines
1.9 KiB
TypeScript

import React, { useEffect, useState } from 'react';
import { Avatar, Divider, List, Skeleton } from 'antd';
import InfiniteScroll from 'react-infinite-scroll-component';
interface DataType {
gender?: string;
name?: string;
email?: string;
avatar?: string;
id?: string;
}
const App: React.FC = () => {
const [loading, setLoading] = useState(false);
const [data, setData] = useState<DataType[]>([]);
const [page, setPage] = useState(1);
const loadMoreData = () => {
if (loading) {
return;
}
setLoading(true);
fetch(`https://660d2bd96ddfa2943b33731c.mockapi.io/api/users/?page=${page}&limit=10`)
.then((res) => res.json())
.then((res) => {
const results = Array.isArray(res) ? res : [];
setData([...data, ...results]);
setLoading(false);
setPage(page + 1);
})
.catch(() => {
setLoading(false);
});
};
useEffect(() => {
loadMoreData();
}, []);
return (
<div
id="scrollableDiv"
style={{
height: 400,
overflow: 'auto',
padding: '0 16px',
border: '1px solid rgba(140, 140, 140, 0.35)',
}}
>
<InfiniteScroll
dataLength={data.length}
next={loadMoreData}
hasMore={data.length < 50}
loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}
endMessage={<Divider plain>It is all, nothing more 🤐</Divider>}
scrollableTarget="scrollableDiv"
>
<List
dataSource={data}
renderItem={(item) => (
<List.Item key={item.email}>
<List.Item.Meta
avatar={<Avatar src={item.avatar} />}
title={<a href="https://ant.design">{item.name}</a>}
description={item.email}
/>
<div>Content</div>
</List.Item>
)}
/>
</InfiniteScroll>
</div>
);
};
export default App;