algolia 即时搜索显示少量项目并使用分页

问题描述

我目前正在使用 algolia，我正在尝试在我的应用程序中显示数据，我的数据库中有超过 37 种产品，我想在我的应用程序中显示它们。我想在一个页面上显示 15 个项目，然后按下一步按钮它将显示接下来的 15 个， 我目前已经设法将我的反应应用程序连接到 algolia，并查看数据，但是我无法显示 15 个项目，然后按下一步它只会显示接下来的 15 个。

我的 Hit 组件如下所示：

function InfiniteHits({ hits,hasMore,refine }) {
  return (
    <View>
      <View>
        <FlatList
          style={{
            width: Platform.OS === "ios" ? 380 : 400,}}
          data={hits}
          keyExtractor={(item) => item.objectID}
          ItemSeparatorComponent={() => <View style={styles.separator} />}
          onEndReached={() => hasMore && refine()}
          renderItem={({ item }) => (
            <View style={styles.item}>
          // here i render the data so when I clik on any of them it opens it in the modal
            </View>
          )}
        />
      </View>
    </View>
  );
}

InfiniteHits.propTypes = {
  hits: PropTypes.arrayOf(PropTypes.object).isrequired,hasMore: PropTypes.bool.isrequired,refine: PropTypes.func.isrequired,};

export default connectInfiniteHits(InfiniteHits);

然后在我的应用程序中：

 <InstantSearch searchClient={searchClient} indexName="name of db">
          <SearchBox />
          <ConnectedPagination padding={2} />
          <Hits />
        </InstantSearch>

对于我的分页，我有：

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

const Pagination = ({ padding = 3,refine,currentRefinement,nbPages }) => (
  <View
    style={{
      flexDirection: "row",justifyContent: "space-around",}}
  >
    <TouchableOpacity onPress={() => refine(1)}>
      <Text>first</Text>
    </TouchableOpacity>
    {range(
      Math.max(1,currentRefinement - padding),Math.min(nbPages,currentRefinement + padding)
    ).map((page) => (
      <TouchableOpacity
        key={page}
        onPress={() => refine(page)}
        style={{
          color: currentRefinement === page ? "red" : "unset",}}
      >
        <Text>{page}</Text>
      </TouchableOpacity>
    ))}
    <TouchableOpacity onPress={() => refine(nbPages)}>
      <Text>last</Text>
    </TouchableOpacity>
  </View>
);

const ConnectedPagination = connectPagination(Pagination);

它正确计算页数并显示它们（在我的另一个数据库中将有 20 多页）但是应用程序仍然显示下面的所有数据，当我搜索某些东西时，我可以看到它改变了数字页面，但是当我点击它时它不会做任何事情，所以问题是我如何在每页显示几个项目并使用分页来移动它们？

文档附带了 hitperpage、分页和滚动条，它们有一个组件和一个小部件，我不确定如何使用它们，我在看教程时有点困惑。

解决方法

Oki 我在某些方面想通了，我在这里使用 InfiniteHits，它显示来自数据库的所有数据，如果您想使用分页并浏览应用程序中的页面而不是 InfiniteHits，您必须使用 Hits。这就是为我修复它的原因。