偏移量变量不会随着apollo fetchmore更新

Question

我试图在react-apollo中使用渲染的props模式进行分页。单击loadMore，分页工作正常。但是，活动指示符不会消失，因为variables.offset根本没有增加。它保持在初始值0，因此hasMorePictures函数仅继续返回true，并且在没有更多数据要加载时不返回false。我已经成功使用了HOC模式的代码集。唯一的问题是不使用渲染的道具模式增加variables.offset。下面是我的代码。请帮忙。预先感谢

import React, { Component } from "react";
import { Text, View, ActivityIndicator, Button, FlatList } from "react-native";

import { Query } from "react-apollo";
import { PICTURES_QUERY } from "../graphql/Queries";

class LinksScreen extends Component {
  render() {
    return (
      <Query
        query={PICTURES_QUERY}
        variables={{ offset: 0, limit: 2 }}
        fetchPolicy="cache-and-network"
      >
        {({ loading, data, variables, fetchMore }) => {
          if (loading) {
            return <ActivityIndicator size="large" color="green" />;
          }

          let picturesList = data.pictures || [];

          let hasMorePictures = picturesList.length % variables.limit === 0;

          if (picturesList.length <= variables.offset) {
            hasMorePictures = false;
          }
          console.log(hasMorePictures);

          loadMore = () => {
            console.log("loadmore");
            fetchMore({
              variables: {
                offset: picturesList.length
              },
              updateQuery: (prev, { fetchMoreResult }) => {
                if (!fetchMoreResult) {
                  return prev;
                }

                return {
                  ...prev,
                  pictures: [...prev.pictures, ...fetchMoreResult.pictures]
                };
              }
            });
          };

          console.log("variables ", variables);

          return (
            <View>
              <Button title="Show More" onPress={loadMore} />
              <FlatList
                data={picturesList}
                renderItem={({ item }) => (
                  <View>
                    <Text>{item.title}</Text>
                  </View>
                )}
                keyExtractor={item => item.id}
                ListFooterComponent={() =>
                  hasMorePictures ? (
                    <ActivityIndicator size="large" color="green" />
                  ) : (
                    <View />
                  )
                }
              />
            </View>
          );
        }}
      </Query>
    );
  }
}

export default LinksScreen;