如何通过在react native中从数组中选择多个类别来过滤FlatList数据

Question

UI图像

在这里，我想根据顶部类别过滤平面列表数据，按钮应该是多选的。

FlatList数据是HotelData数组，上述类别也是使用map函数在滚动视图中使用的一个数组。

因此，通过选择多个类别，我想过滤平面列表数据，所以如果有人完成了这项任务，请帮助我。

const HotelData = [
{
  id: '1',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Chef Vincent',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '2',
  img: require('../Assets/UIPracticeImage/H2.jpg'),
  name: 'Pine hill green caben',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '3',
  img: require('../Assets/UIPracticeImage/H3.jpg'),
  name: 'Sky Palace',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '4',
  img: require('../Assets/UIPracticeImage/H4.jpg'),
  name: 'Green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '5',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Pine green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Bars',
  compareKey: 3,
 },
];
const [categories, setCategories] = useState([
  {name: 'Toutes possibilités', key: 1, isCheck: false, compareKey: 1},
  {name: 'Restaurantes', key: 2, isCheck: false, compareKey: 2},
  {name: 'Bars', key: 3, isCheck: false, compareKey: 3},
]);

Answer 1

您可以使用这个：

const HotelData = [
{
  id: '1',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Chef Vincent',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '2',
  img: require('../Assets/UIPracticeImage/H2.jpg'),
  name: 'Pine hill green caben',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '3',
  img: require('../Assets/UIPracticeImage/H3.jpg'),
  name: 'Sky Palace',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Restaurants',
  compareKey: 2,
},
{
  id: '4',
  img: require('../Assets/UIPracticeImage/H4.jpg'),
  name: 'Green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Toutes possibilities',
  compareKey: 1,
},
{
  id: '5',
  img: require('../Assets/UIPracticeImage/H1.jpg'),
  name: 'Pine green leaf',
  desc: 'Lorem ipsum dolor sit amet aliquon sciscilant',
  tag: 'Bars',
  compareKey: 3,
 },
];
const [filterHotels, setFilterHotels] = useState(HotelData);
const [categories, setCategories] = useState([
  {name: 'Toutes possibilités', key: 1, isCheck: false, compareKey: 1},
  {name: 'Restaurantes', key: 2, isCheck: false, compareKey: 2},
  {name: 'Bars', key: 3, isCheck: false, compareKey: 3},
]);
const [selectedCategories, setSelectedCategories] = useState([]);

const toggleCategory = (category) => {
   const idx = selectedCategories.findIndex(item => item.key === category.key);
   const temp = [...selectedCategories];
   if (idx > -1) { 
     temp.splice(idx, 1);
  } else {
      temp.push(category);
   }
     setSelectedCategories(temp);
}
useEffect(() => {
   HotelData.filter((el) => {
  return setSelectedCategories.some((f) => {
    return f.name === el.tag && f.compareKey === el.compareKey;
  });
});
}, [selectedCategories]
return (
  <FlatList data={filterHotels} renderItem={renderItem} />
 );