繼電器現代：如何顯示負載指示器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在分頁容器

回答

相關問題