Использование response-infinite-scroll-component с предопределенным массивом - PullRequest
Новая
       20

Использование response-infinite-scroll-component с предопределенным массивом

0 голосов
/ 25 марта 2019

У меня есть массив с именем filter, заполненный событиями.

Я пытаюсь реализовать эту бесконечную прокрутку с моим текущим массивом.https://www.npmjs.com/package/react-infinite-scroll-component

У меня есть следующий код. 

const recentActivity = this.state.filtered
.sort( (a, b) => new Date(b.date) - new Date(a.date) )
.map ((array) =>
    <div className="row content-timeline " key={array.id}>
      <div className="col-1 activityIcon">{this.activityIcon(array.source.toString().toLowerCase())}</div>
      <ReactTooltip effect="solid"/>
      <div className="col-11">
        <span className="recentActivityTagHeader">{array.tag === undefined ? array.source : array.tag} <span className="smallGrey">({array.mtn.substr(array.mtn.length - 4)})</span></span>
        <div className="recentActivityDescription">{array.description}</div>
        <div className="recentActivityDate">{styleDateTime(array.date)}</div>
      </div>

    </div>
);

У меня также есть этот объект InfiniateScroll .. 

<InfiniteScroll
    dataLength={this.state.filtered.length}
    next={this.fetchMoreData}
    hasMore={true}
    loader={<h4>Loading...</h4>}>
        {recentActivity}
</InfiniteScroll>

Вот функция fetchMoreData 

fetchMoreData = () => {
      // a fake async api call like which sends
      // 20 more records in 1.5 secs
      setTimeout(() => {
        this.setState({
          filtered: this.state.filtered.concat(Array.from({ length: 200 }))
        });
      }, 1500);
    };

Это не выполнение какого-либо ограниченного div или создание бесконечной прокрутки.

Что именно я делаю не так?

ОБНОВЛЕНИЕ: Моя проблема в том, как я заполняю свой фильтрованный массив установкой состояния.Мне нужен лучший способ сделать это. 

componentDidMount() {


  this.props.touchpointsPayload.data.map((array) =>
    {if (array.sources !== undefined) {
        array.sources.map((sources) =>
          sources.events.map((events) =>
            this.setState(acctInsights => ({
              sources: [...acctInsights.sources, events],
              filtered: [...acctInsights.sources, events]
            }))
          )
        )

    }}

  );
}
...