react-native - Algolia 和 React Native FlatList ListHeaderComponent

Question

我将一个 Algolia 连接的组件放在 FlatList 的标题中，就好像它进入了无限循环的查询。connectInfiniteHits 不断运行。

如果您想在命中列表的标题中放置一些简单的过滤器，这真的很烦人。

我的设置是这样的：

我有一个由 connectInfiniteHits HOC 包装的 FlatList。ListHeaderComponent 包含一个由 connectRefinementList HOC 包装的组件。connectSearchBox HOC 也会出现同样的问题。

有没有人看到这个并找到解决方案？

标签： react-nativealgoliareact-native-flatlist

Answer 1

我设法使它与这些行一起工作：

const RefinementList = connectRefinementList(({ items, refine }) => (
  <View>
    {items.map(item => (
      <TouchableOpacity key={item.label} onPress={() => refine(item.value)}>
        <Text style={{ fontWeight: item.isRefined ? '600' : 'normal' }}>
          {item.label}
        </Text>
      </TouchableOpacity>
    ))}
  </View>
));

const InfiniteHits = connectInfiniteHits(({ hits, hasMore, refine }) => (
  <FlatList
    data={hits}
    keyExtractor={item => item.objectID}
    onEndReached={() => hasMore && refine()}
    ListHeaderComponent={<RefinementList attribute="brand" />}
    renderItem={({ item }) => (
      <View>
        <Text>{JSON.stringify(item).slice(0, 100)}</Text>
      </View>
    )}
  />
));

请注意，我没有使用确实中断的功能版本。