React Native FlatList фильтр с кнопками - PullRequest
Новая
       16

React Native FlatList фильтр с кнопками

1 голос
/ 10 марта 2019

Мне нужна небольшая помощь.Я пытаюсь отфильтровать, а затем повторно визуализировать данные / список с помощью некоторых кнопок.Я использую Redux для получения данных.

Вот плоский список по умолчанию, который я показываю, когда экран открыт. 

const { data } = this.props.data; // Redux data

return (
  <View>
    <View>
      <Text>The list..</Text>
    </View>
    <FlatList
      data={data.filter(item => item.outcome == null)}
      keyExtractor={item => item.signal_id.toString()}
      renderItem={({ item }) => (
        <ListTips
          key={item.signal_id}
          competition={item.league}
          event={item.event}
          sport={item.sport}
          outcome={item.outcome}
          date={Moment(item.start_date).startOf("hour").fromNow()}
        />
      )}
    />
  </View>
);

И это показывает список со спортомсобытия и итоги мероприятия.Я хочу создать 3-4 кнопки / сенсорные элементы, чтобы я мог отфильтровать спорт (item.sport.toLowerCase () == 'гандбол') и список, который будет обновляться только со спортивными событиями по гандболу.

У меня есть данные для событий по гандболу 200, и все данные - 1200, футбол - 400, поэтому я нажимаю на следующую кнопку к гандболу для футбола, чтобы показать список только для футбола.

Я пытался ограничитьданные, вызывая this.props.getData () из action.js из Redux, но он снова загружает все данные.

Базовый: я хочу с элементом onPress (touchableopacity, чтобы изменить данные (data = {data.filter (item => item.outcome == null)}) в data = {data.filter (item => item.sport == 'football')}, например, и загружать только футбольные события.

Спасибо.

...