mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-25 21:56:50 +08:00

* docs: move mock api from randomuser.me to mocky.io * update * update * update * test: update snapshot
77 lines
1.9 KiB
TypeScript
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;
|