AntD列表加载更多道具

如何使用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}
  />
}
yueling195712 回答:AntD列表加载更多道具

您可以使用react-infinite-scroller软件包。它非常直截了当,您可以使用任何与UI相关的软件包来实现它。

仅阅读槽式文档将对您有所帮助。

本文链接:https://www.f2er.com/3152166.html

大家都在问