2017-05-22 167 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。