Блог

Главная - Вопросы по программированию - Algolia и компонент React Native с плоским списком заголовков

Algolia и компонент React Native с плоским списком заголовков

#react-native #algolia #react-native-flatlist

#react-native #algolia #react-native-плоский список

Вопрос:

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

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

Моя настройка такая:

У меня есть плоский список, который обернут в connectInfiniteHits HOC. ListHeaderComponent содержит компонент, который обернут специальным connectRefinementList . Та же проблема возникает с connectSearchBox HOC.

Кто-нибудь видел это и нашел решение?

Комментарии:

1. Не могли бы вы привести небольшой пример вашего компонента? Это помогло бы понять проблему.

2. Немного сложно выделить действительно простой пример для вставки кода, но у меня есть плоский список, который обернут специальной функцией connectInfiniteHits. Если я создам ListHeaderComponent для этого плоского списка, который содержит компонент, обернутый в connectRefinementList, все сломается.

3. Какую форму ListHeaderComponent вы используете? Функция? Компонент?

4. Я использую компонент

5. Мне удается воспроизвести проблему с функцией, но не с компонентом.

Ответ №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 amp;amp; refine()}
    ListHeaderComponent={<RefinementList attribute="brand" />}
    renderItem={({ item }) => (
      <View>
        <Text>{JSON.stringify(item).slice(0, 100)}</Text>
      </View>
    )}
  />
));

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