loadmore不会使用react-infinite-scroller触发器

时间:2018-05-24 22:41:40

标签: javascript reactjs ecmascript-6 react-infinite

我正在使用这个库react-infinite-scroller在每次向下滚动时加载更多项目,但由于某种原因,loadmore不会触发我。

代码如下所示:

In [1]: from itertools import groupby

In [2]: from collections import Counter

In [3]: whatever = [['060710080013011', 9],  ['060710080013011', 9],  ['060710080013011', 9],  ['060710080013011', 9],  ['06071008001
   ...: 3011', 9],  ['060710080013011', 9],  ['060710080013011', 9],  ['060710080013011', 9],  ['060710080013011', 9],  ['06071008001
   ...: 3033', 8],  ['060710080013033', 8],  ['060710080013033', 8],  ['060710080013033', 8],  ['060710080013033', 8],  ['06071008001
   ...: 3033', 8],  ['060710080013033', 8],  ['060710080013033', 8],  ['060710080021000', 15],  ['060710080021000', 15],  ['060710080
   ...: 021000', 15],  ['060710080021000', 15],  ['060710080021000', 15],  ['060710080021000', 15],  ['060710080021000', 15],  ['0607
   ...: 10080021000', 15],  ['060710080021000', 15],  ['060710080021000', 15],  ['060710080021000', 15],  ['060710080021000', 15],  [
   ...: '060710080021000', 15],  ['060710080021000', 15],  ['060710080021000', 15]]

In [7]: counter = []
    ...: # we use groupby to group the inner list by key, i.e. the first label
    ...: for key, grouped in groupby(whatever, lambda x: x[0]):
    ...:     # here, we decide if we need to append the label if the item counts great than multiple of 7
    ...:     for idx, item in enumerate(grouped):
    ...:         # to get the LABEL_INDEX as new keyed
                 keyed = key if int(idx / 7) == 0 else "{}_{}".format(key, int(idx / 7) + 1)
    ...:         counter.append(keyed)
    ...: # simply use a counter to re-count the new label items
    ...: counted = Counter(counter)
    ...: answer = []
    ...: for keyed in sorted(counted):
    ...:     for _ in range(counted[keyed]):
    ...:         answer.append([keyed, counted[keyed]])
    ...:
    ...: print(answer)
    ...:
    ...:
    ...:
    ...:

[['060710080013011', 7], ['060710080013011', 7], ['060710080013011', 7], ['060710080013011', 7], ['060710080013011', 7], ['060710080013011', 7], ['060710080013011', 7], ['060710080013011_2', 2], ['060710080013011_2', 2], ['060710080013033', 7], ['060710080013033', 7], ['060710080013033', 7], ['060710080013033', 7], ['060710080013033', 7], ['060710080013033', 7], ['060710080013033', 7], ['060710080013033_2', 1], ['060710080021000', 7], ['060710080021000', 7], ['060710080021000', 7], ['060710080021000', 7], ['060710080021000', 7], ['060710080021000', 7], ['060710080021000', 7], ['060710080021000_2', 7], ['060710080021000_2', 7], ['060710080021000_2', 7], ['060710080021000_2', 7], ['060710080021000_2', 7], ['060710080021000_2', 7], ['060710080021000_2', 7], ['060710080021000_3', 1]]

如果我在教师中绑定fetchCompanies,那么它会无限地调用函数,并且每次调用页面都会不断增加,这很好,但问题是它在没有滚动的情况下一直调用无限!

我知道如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

请以此更改您的代码:

 <InfiniteScroll pageStart={0}
                 loadMore={this.fetchCompanies}
                  hasMore={true || false}
                  loader={<div className="loader" key={0}>Loading ...</div>}
                  useWindow={false}>