Question

我想无限滚动以获取任何项目，简短的步骤是：

1）在屏幕末尾滚动。

2）使用redux更新项目pageIndex。

3）使用componentDidUpdate来捕获此还原操作。

4）将获取项附加到项数组的末尾。

class InfiniteScroll extends React.Component {
  componentDidMount() {
    window.addEventListener("scroll", throttle(this.onScroll, 500), false);
  }
  componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll, false);
  }
  componentDidUpdate(preProps) {
    if (props.pageindex === preProps.pageindex + 1)
      fetchItems(...);
  }
  onScroll = () => {
    if (
      window.innerHeight + window.scrollY >=
      document.body.offsetHeight - 100
    ) {
      updatePage(...);
    }
  };
  render() {
    return <Component {...this.props} />;
  }
}

此代码的唯一问题是updatePage执行一次时，fetchItems无法立即跟随它。

Answer 1

由于您使用的是redux，因此您的项目列表应通过操作/减速器进行控制。

InfiniteScroll.js：

onScroll () {
    var nearBottom = window.innerHeight + window.scrollY >= document.body.offsetHeight - 100;
    if (!this.props.fetching && nearBottom) {
        fetchItems();  // dispatch action
    }
}

render () {
    var items = this.props.items.map(item => (<Component {item}/>)

    return (
        <ul>{ items }</ul>
    )
}

componentDidMount() {
    window.addEventListener("scroll", this.onScroll.bind(this), false);
}
componentWillUnmount() {
    window.removeEventListener("scroll", this.onScroll.bind(this), false);
}

动作：

fetchItems () {
    return dispatch => {
        dispatch({
            type: "FETCH_ITEMS"
        });
        fetch("/api/items")
        .then(items => {
            dispatch(itemsReceived(items));
        });
    }
}
itemsReceived (items) {
    return {
        type: "ITEMS_RECEIVED",
        payload: {
            items: items
        }
    }
}

减速器：

case "FETCH_ITEMS":
    return {
        ...prevState,
        fetching: true

case "ITEMS_RECEIVED":
    return {
        ...prevState,
        fetching: false,
        items: prevState.items.concat(items)
    }

这样，滚动触发了明确定义的动作（FETCH_ITEMS）。使用redux-thunk，该操作将进行API调用以获取新项目。该调用完成后，您将分派新的操作以通过化简器输入新项目。

然后，reducer更新状态，使<InfiniteScroll>重新呈现更新的项目列表。

注意：如果发生错误，还应该将fetching设置为false。

Answer 2

如果我是你，我会使用图书馆为我做繁重的工作。

一个选项是react-infinite-scroller。

这是用例的样子，主要是伪代码：

<InfiniteScroll
    pageStart={0}
    loadMore={fetchItems} // that's your method for loading more results
    hasMore={props.pageindex === preProps.pageindex + 1} // your 'has more' logic
    loader={<div className="loader">Loading ...</div>}
>
    {items} // <-- This is the content you want to load
</InfiniteScroll>

例如，check out the demo in their repo。

另一个选择是尝试调试代码。但是您需要提供更多上下文。根据您提供的信息，很难分辨出什么地方出了错。

如何使无限滚动获取功能按顺序工作

2 个答案: