如何过滤单位列表中的项目？

Question

所以我有两个数组category: ["All","First","Second"]和cards: [ { id: 1, icon: require("../../../assets/logo.png"), title: 'Title', category: 'First', }, { id: 2, icon: require("../../../assets/logo.png"), title: 'Second Title', category: 'Second', } ]以及一个选择器来选择一个category值

我想做的是呈现一个Flatlist，其中显示了使用Picker选择的项目。基本上，有些过滤器/类别。

我该怎么办？

Answer 1

您可以处于一种状态，该状态存储了当前选定的category，然后使用选定的类别来过滤cards。

例如

state = {
  selected: 'All',
  data: cards,
}

setCategory = (newCategory) => {
  const newData = tab === 'All'
    ? cards
    : tab === 'First'
      ? cards.filter(i => i.category === 'First')
      : cards.filter(i => i.category !== 'Second')
  this.setState({ selected: newCategory, data: newData })
}

render() {
 return (
  <FlatList data={data} extraData={selected} />
 )
}

这只是解决方案之一，有很多解决方法。