0

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

4

1 回答 1

0

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

于 2021-01-19T15:44:33.173 回答