react-infinite-scroll-component懒加载

asd

import InfiniteScroll from 'react-infinite-scroll-component';

let cardParams = {
  userId,
  queryParam: '',
  currentPage: 1,
  pageSize: PAGE_SIZE,
};

// 卡片滑动到底部时的懒加载函数
  const loadMoreData = async () => {
    if (loading) {
      return;
    }
    setLoading(true);
    const page = Math.ceil(cardList.length / PAGE_SIZE) + 1;
    apiGetCard({ ...cardParams, currentPage: page, queryParam: cardSearchVal })
      .then((res) => {
        const arr = res.data.records;
        setCardList([...cardList, ...arr]);
        setLoading(false);
      })
      .catch(() => {
        setLoading(false);
        setCardLoadingTip({ show: true, status: 2 });
      });
  };

const renderCardsStatus = () => {
    return cardList.length ? (
      <div id="cardAutoScroll" className={css.list_wrap}>
        <InfiniteScroll
          dataLength={cardList.length}
          next={loadMoreData}
          hasMore={cardList.length < totalCard}
          loader={
            cardLoadingTip.show ? (
              <LoadingTip status={cardLoadingTip.status} retry={loadMoreData} />
            ) : (
              <Skeleton active />
            )
          }
          endMessage={<div style={{ margin: 'auto' }}>It is all, nothing more 🤐</div>}
          scrollableTarget="cardAutoScroll"
        >
          {cardList.map((el, index) => {
            return (
              <div key={index} className={css.each_card_wrap}>
                <Card
                  data={el}
                  checkAction={checkAction}
                  previewFunc={previewFunc}
                  chapterFunc={chapterFunc}
                />
              </div>
            );
          })}
        </InfiniteScroll>
      </div>
    ) : (
      <div className={css.empty_noData}>
        <p>您搜索的标准为空</p>
      </div>
    );
  };