Algolia и React Native FlatList ListHeaderComponent

Question

Если вы помещаете связанный с Algolia компонент в заголовок FlatList, он как будто входит в бесконечный цикл запросов. ConnectInfiniteHits работает постоянно.

Это действительно раздражает, если вы хотите добавить несколько простых фильтров в заголовки списка совпадений.

Моя установка такова:

У меня есть FlatList, который обернут HOC connectInfiniteHits. ListHeaderComponent содержит компонент, который обернут HOC connectRefinementList. Та же проблема возникает с 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>
    )}
  />
));

Обратите внимание, что я не использую версию функции, которая действительно ломается.