Question

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

Answer 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, 
  ...
)

Answer 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 />

}

Relay Modern：如何在PaginationContainer中的loadMore上显示加载指示器

2 个答案: