algolia 即时搜索显示几个项目并使用分页

Posted 2023-03-21

【中文标题】algolia 即时搜索显示几个项目并使用分页

【英文标题】：algolia instant search display few itmes and use pagination

【发布时间】：2021-04-23 19:23:46

【问题描述】：

我目前正在使用 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、pagination 和 scrollto，它们有一个组件和一个小部件，我不确定如何使用它们，看教程时我有点困惑。

【参考方案1】：

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