React Native集成Algolia分页功能异常：无法实现每页15条数据切换的问题求助

Let's break down why your pagination isn't working and how to fix it:

The Core Problem #

You're using both InfiniteHits and Pagination components—these two have conflicting logic:

• InfiniteHits is designed for scroll-based loading, where it appends new hits to the existing list every time you reach the bottom.
• Pagination is meant to switch between discrete pages, replacing the entire hit list with the data for the selected page.

When you click a pagination button, the Pagination component tries to update the current page, but InfiniteHits keeps all previously loaded hits in the list—so you still see everything, making it look like the pagination does nothing.

Step-by-Step Fix #

1. Replace InfiniteHits with a Standard Hits Component

We need a component that only renders the hits for the current page, not all accumulated hits. Here's the updated code:

import { connectHits } from 'react-instantsearch-native';
import PropTypes from 'prop-types';
import { View, FlatList, Platform } from 'react-native';

function Hits({ hits }) { 
  return ( 
    <View> 
      <FlatList 
        style={{ width: Platform.OS === "ios" ? 380 : 400 }} 
        data={hits} 
        keyExtractor={(item) => item.objectID} 
        ItemSeparatorComponent={() => <View style={styles.separator} />} 
        renderItem={({ item }) => ( 
          <View style={styles.item}> 
            {/* Keep your existing item rendering logic here */}
          </View> 
        )} 
      /> 
    </View> 
  ); 
} 

Hits.propTypes = { 
  hits: PropTypes.arrayOf(PropTypes.object).isRequired, 
}; 

export default connectHits(Hits);

2. Configure hitsPerPage in Your InstantSearch Setup

Add the Configure component to set how many hits show per page (15, in your case):

import { InstantSearch, SearchBox, Configure } from 'react-instantsearch-native';
import ConnectedPagination from './path-to-your-pagination-component';
import Hits from './path-to-your-updated-hits-component';

// ... your existing search client setup

<InstantSearch searchClient={searchClient} indexName="name of db"> 
  <SearchBox /> 
  <Configure hitsPerPage={15} /> {/* This sets 15 hits per page */}
  <ConnectedPagination padding={2} /> 
  <Hits /> 
</InstantSearch>

3. Tweak Your Pagination Component for Better UX

Your pagination logic is mostly correct, but let's fix a style issue and add disabled states for edge pages:

import { connectPagination } from 'react-instantsearch-native';
import { View, TouchableOpacity, Text } from 'react-native';

const range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i); 

const Pagination = ({ padding = 3, refine, currentRefinement, nbPages }) => {
  // Hide pagination if there's only one page
  if (nbPages <= 1) return null;

  return ( 
    <View style={{ flexDirection: "row", justifyContent: "space-around", paddingVertical: 16 }} > 
      <TouchableOpacity onPress={() => refine(1)} disabled={currentRefinement === 1}>
        <Text style={{ color: currentRefinement === 1 ? '#ccc' : '#007AFF' }}>first</Text>
      </TouchableOpacity> 
      {range( 
        Math.max(1, currentRefinement - padding), 
        Math.min(nbPages, currentRefinement + padding) 
      ).map((page) => ( 
        <TouchableOpacity 
          key={page} 
          onPress={() => refine(page)} 
        > 
          <Text style={{ 
            color: currentRefinement === page ? "red" : "#007AFF", 
            paddingHorizontal: 8,
            fontWeight: currentRefinement === page ? 'bold' : 'normal'
          }}>
            {page}
          </Text> 
        </TouchableOpacity> 
      ))} 
      <TouchableOpacity onPress={() => refine(nbPages)} disabled={currentRefinement === nbPages}>
        <Text style={{ color: currentRefinement === nbPages ? '#ccc' : '#007AFF' }}>last</Text>
      </TouchableOpacity> 
    </View> 
  ); 
}; 

const ConnectedPagination = connectPagination(Pagination);
export default ConnectedPagination;

How This Works #

• The Configure component tells Algolia to return only 15 hits per API request.
• The standard Hits component will now only render the hits for the current page (not all accumulated hits).
• When you click a pagination button, the refine function updates the current page, and Algolia returns the corresponding 15 hits—your FlatList will update to show only that page's data.

内容的提问来源于stack exchange，提问作者S. N