Relay Modern：如何在分页容器中显示加载指示器答案

【问题标题】：Relay Modern: How to display a loading indicator on loadMore in a PaginationContainerRelay Modern：如何在分页容器中显示加载指示器
【发布时间】：2017-12-17 03:06:26
【问题描述】：

我试图弄清楚在数据分页时如何在 Relay Modern 应用程序中显示加载指示器。我有一个基于 PaginationContainer 的组件，我想在分页附加数据时显示加载指示器（调用 loadMore()）。除了以某种方式提供自定义网络实现之外，我看不到任何其他方法可以在任何不完全是我想要的网络请求期间执行此操作。想法？

【问题讨论】：

标签： relayjs

【解决方案1】：

我认为 Relay 带有一个 API，可以让您知道请求是否处于待处理状态，您可以访问 this.props.relay.isLoading()（请参阅 docs）

class MyComponent extends React.Component {
  render () {
    return {
      <div>
        {this.props.relay.isLoading() ? <Spinner /> : null>
        // ....
      </div>
    }
  }
}

export default createPaginationContainer(
  MyComponent, 
  ...
)

【讨论】：

嘿，我不想问，但我在使用 Relay Modern createPaginationContainer 时遇到了问题。如果你有时间可以看看：stackoverflow.com/questions/45126278/…
@Vincent Taing，有趣的是， this.props.relay.isLoading() 在我调用 loadMore() 后在我的 PaginationContainer 的渲染方法中为 true。但是正如我所怀疑的那样，我的渲染方法只被调用了一次。所以这里我无法判断网络请求是在进行中还是已经完成。

【解决方案2】：

在我看来，这是一个常见的用例，应该在 Relay API 中明确支持，但以下是我能想到的最好的。鼓励提出其他解决方案的建议。

在我的基于分页容器的组件中：

constructor(arg) {
  super(arg);
  this.state = {isLoadingMore: false}
}

componentWillReceiveProps(nextProps) {
  if (this.props !== nextProps) {
    this.setState({isLoadingMore:false});
  }
}

// onClick handler for "More" button
handleMore() {
  if (!this.props.relay.hasMore() || this.props.relay.isLoading()) {
    return;
  }

  this.setState({isLoadingMore: true});
  this.props.relay.loadMore(
    ...
  )
}

render() {
 ...
 const isLoadingMore = this.state.isLoadingMore;    
 return (isLoadingMore ? <LoadingIndicator /> : <ListOfStuffView />

}

【讨论】：