0

由于 React RelaycreatePaginationContainer不支持基于偏移的分页，下一个最佳选择是通过使用createRefetchContainer.

在 Relay Modern 文档https://facebook.github.io/relay/docs/refetch-container.html上提供的示例中，实施时将向前分页一次，但这仅仅是因为我们正在从默认状态转换为偏移量0 到我们的新状态 0 + 10。随后的点击事件会产生相同的结果，因为这些值没有被存储。

我本来预计偏移值会继续增加，但似乎并没有通过每次重新获取来维持状态。

我在 repo 上遇到了这个问题，似乎已经解决了这个问题，https://github.com/facebook/relay/issues/1695。如果是这种情况，则文档尚未更新。

4

1 回答 1

1

虽然我相信应该有一个内置的机制来解决这个问题，但我最终还是将值存储在状态中并使用回调来触发我的重新获取。

因此，在我从文档中列出的上述示例中，更新似乎发生在此处：

_loadMore() {
  // Increments the number of stories being rendered by 10.
  const refetchVariables = fragmentVariables => ({
    count: fragmentVariables.count + 10,
  });
  this.props.relay.refetch(refetchVariables, null);
}

所以我对这个特定示例的问题是我们正在从 fragmentVariable 中提取默认状态，因此本质上没有发生真正的变化。根据您的实现，这可能是可以接受的，但我认为对于大多数用例，我们希望看到值实际上被更新为更新片段中的变量。

所以我在基于偏移的分页方面处理这个问题的方式是......

_nextPage = () => {
  if ((this.state.offset + this.state.limit) < (this.state.total - this.state.limit) {
    this.setState({ offset: (this.state.offset + this.state.limit), () => {
      this._loadMore();
    }
  }
}

_loadMore = () => {
  const refetchVariables = {
    offset: this.state.offset,
    limit: this.state.limit
  }
  this.props.relay.refetch(refetchVariables, null);
}

可能有错字，我现在实际上并没有在看我的代码。但是通过使用组件的状态，您将能够有效地更新 refetchContainer 的变量。

于 2017-08-05T20:06:48.943 回答