Question

我将Algolia连接的组件放在FlatList的标头中，就好像它进入了无限查询循环。 connectInfiniteHits持续运行。

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

我的设置是这样的：

我有一个由connectInfiniteHits HOC包装的FlatList。 ListHeaderComponent包含一个由connectRefinementList HOC包装的组件。 connectSearchBox HOC发生相同的问题。

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

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>
    )}
  />
));

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

Algolia和React Native FlatList ListHeaderComponent

1 个答案: