反应无限滚动不会停止调用 Loadmore 道具函数？

Question

我已经在这里配置了我的代码InfinitesCroll示例：https：//github.com/cassettererocks/react-infinite-scroller/blob/blob/blob/master/master/master/docs/src/index.js

我的代码就是这样：

class MyComponent extends React.Component {
  loadItems = (pagingState) => {
    let query = `/api/v1/news?pagingState=${pagingState}`;
    axios.get(query, { 
      headers: {
        Authorization: 'Bearer '+localStorage.getItem('token')
      },
    }).then(async (response) => {
      if(!response.data.rows.length) {
        this.setState((state, props) => ({
          hasMoreItems: false
        }));
      }
      var encodeURLPagingState = encodeURIComponent(response.data.pagingState)
      await this.setState({
        pagingState: encodeURLPagingState,
        offset: this.state.offset+15,
        allNews: [...this.state.allNews, ...response.data.rows]
      });
    }).catch((err) => {
      console.log(`1st axios catch! = `,err)
    }); 
  }
  render () {
    return (
      <ul>
        <InfiniteScroll
          pageStart={0}
          loadMore={this.loadItems(this.state.pagingState)}
          hasMore={this.state.hasMoreItems}
          loader={<div>Looading...</div>}
          useWindow={false}
        >
          {items}
        </InfiniteScroll>) 
      </ul>
  }

我查看了这些问题，我已经尝试过：loader={<div style={{ clear: 'both' }}>Loading...</div>}我也确定每个项目节点都有唯一的键，帮助？

Answer 1

一个建议是使用承诺对象。语法如下：

return new Promise((resolve, reject) => {
   ... make your fetch calls here ...
   resolve();
}

这将阻止随后的接听电话，直到解决承诺被调用。

。

有关更多信息，请参阅此处的MDN Promise对象和此处有用的教程。

欢呼。