Как фильтровать данные с помощью React Native FlatList? - PullRequest
Новая
       16

Как фильтровать данные с помощью React Native FlatList?

0 голосов
/ 06 марта 2020

Я пытаюсь найти способ, чтобы пользовательский компонент кнопки FlatList фильтровал родительский FlatList. В настоящее время я создал основной родительский элемент FlatList и дочерний компонент категории Button, который будет при отображении условно отображать вложенный дочерний компонент кнопок подкатегории. Например, родительский FlatList показывает список животных, и один из фильтров - это виды, с соответствующими подкатегориями: кошки, медведи, собаки и т. Д. c. Когда пользователь нажимает вид, он условно отображает кнопки подкатегорий в FlatList, а когда нажимается «cat», в родительском FlatList отображаются только кошки.

  1. Если что я работаю, есть ли способ взять заголовок или идентификатор проп из каждой кнопки подкатегории, когда я вызываю "filterSpecies" с пропуском onPress? Прямо сейчас, filterSpecies жестко запрограммирован в 'Eagle', так что он будет работать (я использую библиотеку loda sh, но я могу отказаться от нее для пользовательских логи c при необходимости).

  2. Есть ли лучший способ показать опции подкатегории без использования другого FlatList? Я нахожу FlatList полезным в некоторых случаях, например, когда родитель отображает данные, но слишком запутанный и строгий, когда дело доходит до условной логики c.

родительский компонент FlatList 

...
 const [speciesFilter, setSpecies] = useState([]);
...
  filterSpecies = () => {
// currently hard-coded to 'Eagle'
    const filteredByEagle = _.filter(data, { species: 'Eagle' });
    setSpecies(filteredByEagle);
  };
...
  renderItem = ({ item }) => {
    return (
      <TouchableOpacity>
        <AnimalIcon
          name={item.name}
          species={item.species}
          image={item.image}
        />
      </TouchableOpacity>
    );
  };

  return (
    <View style={styles.container}>
      <SearchBar />
      <FilterPicker title='Species' filterSpecies={filterSpecies} />
      <FlatList
        data={speciesFilter}
        numColumns={3}
        renderItem={renderItem}
        keyExtractor={icon => icon.id}
      />
    </View>
  );
};

подкатегории FlatList дочерний компонент 

  return (
    <View>
      <FlatList
        horizontal={true}
        data={species}
        style={styles.buttonList}
        keyExtractor={item => item.id}
        renderItem={({ item }) => {
          return (
            <View style={styles.container}>
              <Button
                title={item.species}
                style={styles.button}
                id={species.id}
                onPress={() => filterSpecies()}
              />
            </View>
          );
        }}
      />
    </View>
  );
};
...