Question

我有一个名为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]
            }))
          )
        )

    }}

  );
}

将react-infinite-scroll-component与预定义数组一起使用

0 个答案: