继电器现代：如何显示负载指示器loadMore在分页容器

我想弄清楚如何在数据中分页时在继电器现代应用程序中显示负载指示器。我有一个基于PaginationContainer的组件，并且我希望在调用其他数据（调用loadMore（））时显示一个加载指示符。除了以某种方式提供一个自定义网络实现，在任何网络请求期间执行此操作时，我都没有看到任何其他方式来做到这一点。思考？继电器现代：如何显示负载指示器loadMore在分页容器

来源

2017-07-12 bjlevine

我觉得继电器配备了一个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, 
    ... 
)

来源

2017-07-14 00:12:56

嘿，我讨厌问，但我有继电器现代createPaginationContainer麻烦。如果你有一个时刻，可以看看：https://stackoverflow.com/questions/45126278/relay-modern-createpaginationcontainer-not-receiving-any-props – liminal18

@Vincent Taing，有趣的是，this.props.relay.isLoading （）在我调用loadMore（）后在我的PaginationContainer的渲染方法中是真实的。但我的渲染方法只有一次被调用，因为我怀疑。所以我不能在这里告诉网络请求是正在进行还是已经完成。 – bjlevine

在我看来，这是一个常见的使用情况下应在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 /> 

}

来源

2017-07-24 18:08:10 bjlevine

继电器现代：如何显示负载指示器loadMore在分页容器

回答

相关问题