reactjs - 如何使用 react-infinite-scrollbar 进行分页

Question

我正在使用一个名为 react-infinite-scroller 的库进行分页。

但我没有得到正确的结果。API 仅被调用一次（最初）。我希望当我向下滚动时，它应该再次使用其他记录调用该 API。

这是代码

import InfiniteScroll from 'react-infinite-scroller';

const People = (props) => {
constructor(props) {
    super(props);
    this.state = {
      activeTab: 1,
      searchString: '',
      data: [],
      hasMore: false,
      loading: false,
      page: 0,
    };
  }
 getPeopleInfo = () => {
    this.setState({ loading: true, data: [] });
    const { params } = this.props || {};
    const { page, searchString } = this.state;
    if (params?.params) {
      this.props
        .getPeople(params.params, page, 100, searchString)
        .then((resp) => {
          if (resp && resp.data) {
            this.setState({
              loading: false,
              data: this.state.data.concat(resp?.data),
              page: page + 1,
              hasMore: resp?.recordsTotal !== this.state.data.length,
            });
          }
        })
        .catch(() => {});
    }
  };
fetchMore = () => {
    const { activeTab } = this.state;
    if (activeTab === 1) {
      this.getPeopleInfo();
    } else {
      this.getConnectedPeople();
    }
  };
return (
              <InfiniteScroll
                    getScrollParent={myElementRef}
                    hasMore={hasMore}
                    useWindow={false}
                    loadMore={() => this.fetchMore()}
                  >
               {map(this.state.data,(people) => (
                      <PeopleInfo data={people} />
           ),
           )};
               </InfiniteScroll>
)
}

标签： reactjs