滾動加載更多數據

Question

我有一個帶有搜索輸入的頁面，一旦用戶點擊提交結果就會出現。

可能有很多結果（通常不是，但可能有數千個結果）而且我不想一次加載它們，如何在用戶向下滾動時從他的 API 中獲取幾十個並獲取更多結果，這樣做的正確方法是什么？ 我在想 Lodash 油門可以安裝，但我找不到一個很好的例子。

這是我的反應組件：

const getContacts = async (searchString) => {
  const { data: contactsInfo} = await axios.get(`api/Contats/Search?contactNum=${searchString}`);
  return contactsInfo;
};
export default class Home extends React.Component {
  state = {
    contactsInfo: [],
    searchString: '',
  };

  handleSubmit = async () => {
    const { searchString } = this.state;
    const contactsInfo = await getContacts(searchString);
    this.setState({ contactsInfo });
  };

  onInputChange = e => {
    this.setState({
      searchString: e.target.value,
    });
  };

  onMouseMove = e => {

  };

  render() {
    const { contactsInfo, searchString, } = this.state;
    return (
          <div css={bodyWrap} onMouseMove={e => this.onMouseMove(e)}>
            <Header appName="VERIFY" user={user} />
            {user.viewApp && (
              <div css={innerWrap}>
                <SearchInput
                  searchIcon
                  value={searchString || ''}
                  onChange={e => this.onInputChange(e)}
                  handleSubmit={this.handleSubmit}
                />
                     {contactsInfo.map(info => (
                      <SearchResultPanel
                        info={info}
                        isAdmin={user.isAdmin}
                        key={info.id}
                      />
                    ))}
              </div>
            )}
            <Footer />
          </div>

    );
  }
}

Answer 1

如果 API 支持分頁，那么您可以使用React-Infinite-Scroll 。 看起來像這樣

  <div style="height:700px;overflow:auto;">
    <InfiniteScroll
        pageStart={0}
        loadMore={loadFunc}
        hasMore={true || false}
        loader={<div className="loader">Loading ...</div>}
        useWindow={false}>
      {items}
    </InfiniteScroll>
  </div>

但是，如果 REST API 不支持它，您仍然可以加載數據並將它們以塊的形式顯示給具有相同庫的用戶，但您需要自己處理當前的加載狀態。