如何乘以方法调用的数量来获取下一页数据（无限滚动分页）

Question

I'm currently working on implementing an infinite scrolling pagination feature by applying the useState hook. The fetchMoreListItems() function seen below uses every subsequent .follow('next') call to fetch the next page from the API. For example .follow('next').follow('next').followAll('item') will fetch all records on page 3.

This logic may sound silly, but I'm essentially trying to find an efficient way to "multiply" the amount of .follow('next') method calls times the page number set by setPage() to fetch that appropriate data to append to the DOM when the user scrolls to the bottom. For example if by infinite scrolling we currently see all data up until page 3, then I would need .follow('next') * 3 to fetch page 4 data when the user scrolls down. Is there a way to break up this series of method calls such that if I wanted page 4 data, then instead of calling .follow('next') 3 times, I could do something like this: .follow('activity-collection') +.follow('next') * 3 +.followAll('item') ?

const [items, setItems] = useState<Resource<Activity>[]>();
const [isFetching, setIsFetching] = useState(false);
const [page, setPage] = useState(1);

useEffect(() => {
    if (!props.resource) return;
    props.resource
      .follow('activity-collection').followAll('item')
      .then(resources => {
        setItems(resources);
        console.log(resources);
      })
      .catch(err => console.error('Error fetching resources: ' + err));
  }, [activityResource]);

function fetchMoreListItems() {
    setTimeout(() => {
      if (page >= 1) {
        props.resource
          // This line currently retrieves page 2 information 
          // every subsequent .follow('next') fetches the next page
          .follow('activity-collection').follow('next').followAll('item')
          .then(resources => {
            setItems([...items, ...resources]);
            console.log([...items, ...resources]);
            setPage(page + 1);
          })
          .catch(err => console.error('Error fetching resources: ' + err));
        setIsFetching(false);
        console.log(page);
      }
    }, 1000);
  }

Answer 1

This is doable using a bottom up recursive approach:

const [page, setPage] = useState(2);

const fetchFunction = (pageToLoad) => {

  // basecase
  if (pageToLoad === page) {
    return props.resource.follow('activity-collection');
  } else {
    return fetchFunction(pageToLoad + 1).follow('next')
  }
}

fetchFunction(0)

/// call chain for page = 2:

props.resource.follow('activity-collection').follow('next').follow('next')