用按钮反应本机FlatList过滤器

时间:2019-03-09 23:26:33

标签: reactjs react-native redux react-native-flatlist

我不需要什么帮助。我试图过滤,然后使用一些按钮重新呈现数据/列表。我正在使用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个按钮/可触摸的元素,以便可以过滤sport(item.sport.toLowerCase()=='handball')和列表,以便仅在手球运动项目中刷新。

我有200个手球事件数据,整个数据是1200,足球是400,所以我单击了手球的下一个按钮以显示足球,仅显示了足球列表。

我试图通过从Redux的action.js调用this.props.getData()来限制数据,但它会再次加载整个数据。

基本:我想使用onPress元素(touchableopacity更改数据(数据= {data.filter(item => item.outcome == null)})到数据= {data.filter(item => item.sport) =='football')},例如,仅加载足球比赛。

谢谢。

0 个答案:

没有答案