AntD List loadMore 道具

Question

如何使用 List 在 AntD 中实现 loadMore 属性？我已经有限制的api。我正在使用 fetch API，但不像 AntD 在他们的示例中使用的那样使用 Reqwest

这是我的组件

<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,
        isSkeleton: false,
      });
    }, 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}
  />
}

Answer 1

您可以使用react-infinite-scroller 包。它非常简单，您可以使用任何与 UI 相关的包来实现它。

只阅读低谷文档会对您有所帮助。