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

Question

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

1) 在屏幕末尾滚动。

2) 使用 redux 更新项目 pageIndex。

3) 使用 componentDidUpdate 来捕捉这个 redux 动作。

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，因此您的项目列表应通过操作/reducer 控制。

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 提供新项目。

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。

---

另一种选择是尝试调试您的代码。但是您需要提供更多上下文。从你提供的信息来看，真的很难判断是哪里出了问题。