AntD List loadБольше проп - PullRequest
Новая
       10

AntD List loadБольше проп

0 голосов
/ 06 ноября 2019

Как я могу реализовать loadMore prop в AntD, используя List? У меня уже есть 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,
        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}
  />
}

1 Ответ

0 голосов
/ 06 ноября 2019

Вы можете использовать react-infinite-scroller пакет. это очень прямо вперед, и вы можете реализовать его с помощью любых пакетов, связанных с пользовательским интерфейсом.

Вам поможет только чтение документации.

...