Question

我在这里从react-infinite-scroll示例配置了我的代码InfiniteScroll：https://github.com/CassetteRocks/react-infinite-scroller/blob/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

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

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

这将阻止后续的提取调用，直到解析了promise，即调用resolve（）。

有关详情，请参阅此处MDN Promise object和此处helpful tutorial。

干杯。

react-infinite-scroll不会停止调用loadmore prop函数？

1 个答案: