2017-05-22 166 views
1

我目前正在使用展會,列表只是最初的罰款,直到我遵循loadMore教程,加載更多的RN不工作,hasMore )函數返回false,而我hasNextPage是真的繼電器現代,加載更多不工作,hasMore()保持返回false

我家的屏幕上有一個記錄列表裏面

這是我家

import Expo from 'expo'; 
import React, {Component} from 'react'; 
import { 
    View, 
    Text, 
    ActivityIndicator, 
    FlatList, 
    TouchableOpacity 
} from 'react-native'; 

import { 
    Button 
} from 'react-native-elements'; 

import { 
    QueryRenderer, 
    createPaginationContainer, 
    graphql 
} from 'react-relay'; 

import environment from '../createRelayEnvironment'; 
import DummyList from '../component/dummyList'; 

class Home extends Component { 

    render() { 
    return(
     <QueryRenderer 
     environment={environment} 
     query={graphql` 
      query homeQuery(
      $count: Int! 
      $cursor: String! 
     ) { 
      viewer { 
       ...dummyList_viewer 
      } 
      } 
     `} 
     variables= {{ 
      count: 5, 
      cursor: '' 
      } 
     } 
     render={({error, props, retry}) => { 
      if(props){ 
      return(
       <DummyList {...props} /> 
      ); 
      } 

      return(
      <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}> 
       <ActivityIndicator size="large" /> 
      </View> 
     ); 
     }} 
     /> 
    ); 
    } 
} 

export default Home; 

這是我的內部列表的子組件

```

import Expo from 'expo'; 
import React, {Component} from 'react'; 
import { 
    View, 
    Text, 
    FlatList, 
    TouchableOpacity 
} from 'react-native'; 

import { 
    createPaginationContainer, 
    graphql 
} from 'react-relay'; 

class DummyList extends Component { 
    renderItem(item) { 
    return(
     <View style={{padding: 10}}> 
     <Text key={item.node.id}>{item.node.title}</Text> 
     </View> 
    ); 
    } 

    _loadMore() { 
    console.log('this.props.relay.hasMore()', this.props.relay.hasMore()); 
    if(!this.props.relay.hasMore() || this.props.relay.isLoading()){ 
     return; 
    } 

    this.props.relay.loadMore(
     10, 
     e => { 
     console.log('e', e); 
     } 
    ) 
    } 

    render() { 
    console.log('apa aja nih props-nya', this.props); 
    return(
     <View> 
     <FlatList 
      data={this.props.viewer.allDummies.edges} 
      renderItem={({item}) => this.renderItem(item)} 
      keyExtractor={(item, index) => item.node.id} 
     /> 
     <TouchableOpacity style={{padding: 10}} onPress={() => this._loadMore()}> 
      <Text>Load More</Text> 
     </TouchableOpacity> 
     </View> 
    ) 
    } 
} 

export default createPaginationContainer(
    DummyList, 
    { 
    viewer: graphql` 
     fragment dummyList_viewer on viewer { 
     allDummies(first: $count, after: $cursor) @connection(key: "DummyList_allDummies"){ 
      pageInfo{ 
      hasNextPage 
      } 
      edges{ 
      cursor 
      node { 
       id 
       title 
      } 
      } 
     } 
     } 
    ` 
    }, 
    { 
    direction: 'forward', 
    getConnectionFromProps(props) { 
     console.log('getConnectionFromProps props', props); 
     return props.viewer; 
     // return props.user && props.user.feed; 
    }, 
    getFragmentVariables(prevVars, totalCount) { 
     return { 
     ...prevVars, 
     count: totalCount 
     } 
    }, 
    getVariables(props, { count, cursor }, fragmentVariables) { 
     return { 
     count, 
     cursor 
     } 
    }, 
    query: graphql` 
     query dummyListQuery(
     $count: Int! 
     $cursor: String 
    ){ 
     viewer{ 
      ...dummyList_viewer 
     } 
     } 
    ` 
    } 
); 

```

我找不到爲什麼我的hasMore()回頭率假的原因,我有1000條記錄供參考,並初步負載5

capture_1

回答

1

我有同樣的問題,this.props.relay.hasMore()總是返回false。我明確添加到查詢全部pageInfo現在正在返回true,因爲它應該。

pageInfo { 
    endCursor 
    hasNextPage 
    hasPreviousPage 
    startCursor 
} 

太糟糕了,文檔不準確或與實現不同步。此外,我注意到,如果不將pageInfo添加到片段中,發送到服務器的查詢確實包含pageInfo字段,因此的字段可能是分頁容器中的BUG。