javascript - 使用带有预定义数组的 react-infinite-scroll-component

Question

我有一个名为过滤的数组，其中填充了事件。

我正在尝试用我当前的数组来实现这个无限滚动。 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]
            }))
          )
        )

    }}

  );
}

标签： javascriptreactjsinfinite-scroll