分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何根据 3 种不同条件进行过滤 (ReactJS)，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何根据 3 种不同条件进行过滤 (ReactJS)？

开发过程中遇到如何根据 3 种不同条件进行过滤 (ReactJS)的问题如何解决？下面主要结合日常开发的经验，给出你关于如何根据 3 种不同条件进行过滤 (ReactJS)的解决方法建议，希望对你解决如何根据 3 种不同条件进行过滤 (ReactJS)有所启发或帮助；

如何根据 3 种不同条件进行过滤 (ReactJS)

我有三个选择器：

@H_753_2@multiSELEctor (genres)，例如所选流派 [14,8,6] 的数组 ID，并应检查该数组中是否存在 'genre_ID的 ID。
year，这应该检查'release_year'的键值
输入字段，应该检查'title'和'artist'的键值

为空时的默认值

SELE

流派

年 --> []
输入框 --> ''

请记住，当用户仅输入输入字段或仅选择流派时，它也应该起作用

为了构建一个函数，我需要过滤并检查对象键值中是否存在该函数。

Click on the link to codesandbox to get a better understanding of this issue

0: {ID: 501437,artist: "Bob",title: "All In",release_year: 2014,genre_ID: 14,…}
1: {ID: 501649,artist: "Elina",title: "Veni paca to",genre_ID: 8,…}
2: {ID: 501895,artist: "Timbo",title: "I Should Have KNown It",release_year: 2010,…}
3: {ID: 502139,artist: "Wakanda",title: "grove St. Party",release_year: 2011,genre_ID: 6,…}
4: {ID: 502992,artist: "Beyoncé",title: "Single LadIEs (Put a Ring on It)",release_year: 2008,genre_ID: 62,

所以我想知道如何编写一个简洁的代码来过滤所有内容。因此，如果我写类似“bob”的内容，但选择“2013”年，它将不会显示任何内容，如果我将“年份”更改为“2014”。然后'Bob' 'All In' 将显示在结果中。

const SELEctedYear = 2014;
const inputValue = 'bob';
const SELEctedGenres = [14,6,8];

const filterrequirements = (data: any) => {
        if(SELEctedYear !== data.release_year) return false;
        return true;
    }
const filteredVIDeos = vIDeoList.filter(filterrequirements);

解决方法

试试下面的过滤器。

添加了条件 inputValue.trim() == '' || ，因此如果未提供输入，则不会根据输入进行过滤。
类似添加了 SELEctedGenres.length == 0 || ，因此如果没有选择 Genres 进行过滤，则不会使用 Genres 进行过滤。
您也可以为 SELEctedYear 设置相同的条件，因为我无法假设它的默认值是什么，所以我没有添加这样的条件。
在条件中使用了 .ToLowerCase，因此它将以不区分大小写的方式显示结果。

let videoList = [
{id: 501437,artist: "Bob",title: "All In",release_year: 2014,genre_id: 14},{id: 501649,artist: "Elina",title: "Veni paca to",genre_id: 8},{id: 501895,artist: "Timbo",title: "I Should Have Known It",release_year: 2010,{id: 502139,artist: "Wakanda",title: "Grove St. Party",release_year: 2011,genre_id: 6},{id: 502992,artist: "Beyoncé",title: "Single Ladies (Put a Ring on It)",release_year: 2008,genre_id: 62}]

const SELEctedYear = [];
const inputValue = 'bob';
const SELEctedGenres = [14,6,8];

const filterrequirements = (data) => {  
  return (SELEctedYear == null || SELEctedYear == 0 || (Array.isArray(SELEctedYear) && SELEctedYear.length == 0) || data.release_year == SELEctedYear)
          && (inputValue.trim() == '' || data.artist.toLowerCase().includes(inputValue.toLowerCase()) || data.title.toLowerCase().includes(inputValue.toLowerCase()))
          && (SELEctedGenres.length == 0 || SELEctedGenres.includes(data.genre_id));
}

const filteredVideos = videoList.filter(filterrequirements);

console.log(filteredVideos);

const videos = [
    {id: 501437,genre_id: 14 },genre_id: 8 },genre_id: 6 },genre_id: 62 },];

const SELEctedYear = 2011;
const inputValue = 'grove';
const SELEctedGenres = new Set([14,8]);

const filteredVideos = videos
.filter((video) => video.release_year === SELEctedYear)
.filter((video) => video.title.toLowerCase().indexOf(inputValue.toLowerCase()) >= 0)
.filter((video) => SELEctedGenres.has(video.genre_id));

console.log(filteredVideos);

我会为每个过滤器操作设置单独的函数。在我看来，这将使实际的过滤更容易阅读和理解。

像这样：

const myArr = [
  {id: 501437,];

const byYear = (year = 0,item) => (item.release_year === year);
const byArtist = (artist = '',item) => (item.artist === artist)
const byGenres = (genres = [],item) => (genres.includes(item.genre_id))

const filteredArr = myArr
  .filter(byYear.bind(this,2014))
  .filter(byArtist.bind(this,'Bob'))
  .filter(byGenres.bind(this,[14,8]));

console.log(filteredArr);

我真的不认为有“单衬”解决方案。一种可能：

const SELEctedYear = 2014;
const inputValue = "bob";
const SELEctedGenres = [14,8];

const checkYear = (data,year) => {
  return year ? data.release_year === year : true;
};
const checkValue = (data,value) => {
  return value
    ? data.artist.includes(value) || data.title.includes(value)
    : true;
};
const checkGenre = (data,genres) => {
  return genres ? genres.includes(data.genre_id) : true;
};

const filterrequirements = (data) =>
  checkYear(data,SELEctedYear) &&
  checkValue(data,inputvalue) &&
  checkGenre(data,SELEctedGenres);

const filteredVideos = videoList.filter(filterrequirements);