如何使用List在AntD中实现loadmore道具?我已经有限制的api。我使用的是提取API,而不是Reqwest,就像他们的示例中使用的AntD
这是我的组成部分
<List
itemLayout="horizontal"
loading={isLoading}
loadmore={isLoadmore}
dataSource={dataSource}
renderItem={(item,i) => (
<List.Item>
<Skeleton
avatar={false}
title={false}
loading={isSkeleton}
active
>
<List.Item.Meta title={item.desc} description={item.type} />
<div>
content here
</div>
</Skeleton>
</List.Item>
)}
/>
我正在从另一个文件中调用它
const CalendarManagement = () => {
const holidayListDay = [];
const limit = 3;
const [isHolidayDay,setHolidayDay] = useState(holidayListDay);
const [isLoadingHoliday,setLoadingHoliday] = useState(false);
const [state,setState] = useState({
isSkeleton: false,})
//Fetching API here
const fetchHolidayList = async () =>
await CalendarManagementAPI.getHolidayList(limit)
.then(data => {
setHolidayDay(data);
setLoadingHoliday(false);
})
.catch(error =>
setState({
error,isLoadingHoliday: false,})
);
useEffect(() => {
fetchHolidayList();
setLoadingHoliday(true);
setState({
...state,isSkeleton: false,});
}
const onLoadmore = () => {
setState({
...state,isSkeleton: true,isLoadingHoliday: true,});
setTimeout(() => {
setHolidayDay(isHolidayDay);
setState({
...state,});
},1000);
};
const loadmoreHoliday =
!state.isLoadingHoliday && !state.isSkeleton ? (
<div>
<Button onClick={onLoadmore}>View More</Button>
</div>
) : null;
<CalendarHolidayList
dataSource={isHolidayDay}
isLoading={isLoadingHoliday}
isLoadmore={loadmoreHoliday}
isSkeleton={state.isSkeleton}
/>
}