React Infinite Scroller在窗口滚动上不起作用

问题描述

我正在将react-infinite-scroller插件用于react.js，由于某种原因，它无法正常工作。

我已经准备好要显示的所有项目清单，因此我只是在setTimeout上下文中合并下一个项目。我只需要UI效果。

我的代码如下：

import * as React from 'react';
import InfiniteScroll from 'react-infinite-scroller';

import './List.scss';
import Item,{
  Type as ItemType,} from './Item/Item';

const PREDICTIONS_PER_PAGE = 10;

export interface Props {
  predictions: Prediction[] | null;
}

export interface State {
  hasMorePredictions: boolean;
  items: Prediction[];
}

class List extends React.Component<Props,State> {
  totalPages: number;

  constructor(props: Props) {
    super(props);

    this.state = {
      hasMorePredictions: true,items: [],};

    const { predictions } = props;
    this.totalPages = predictions ? Math.min(predictions.length / PREDICTIONS_PER_PAGE + 1,10) : 0;
  }

  loadMorePredictions = (page: number) => {
    if (page > this.totalPages) {
      this.setState({ hasMorePredictions: false });
      return;
    }

    setTimeout(
      () => this.setState({ items: (this.props.predictions || []).slice(0,page * PREDICTIONS_PER_PAGE) }),1500
    );
  }

  render() {
    const { items,hasMorePredictions } = this.state;
    const loader = <div className="loader" key={0}>Loading ...</div>;

    const list: JSX.Element[] = [];
    items.forEach((prediction: Prediction) => {
      list.push(
        <Item
          key={prediction.id}
          type={ItemType.Image}
          prediction={prediction}
        />,);
    });

    return (
      <div className={cx.b()}>
        <InfiniteScroll
          loadMore={this.loadMorePredictions}
          hasMore={hasMorePredictions}
          loader={loader}
          useWindow
        >
          {list}
        </InfiniteScroll>
      </div>
    );
  }
}

export default List;

但是，当我滚动到页面末尾时，看不到新项目。有什么我想念的吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

infinite-scroll javascript reactjs reactjs