Javascript 如何在React中过滤多个值

我试图搜索一个数组，但在此期间，我可以只搜索我想要实现的名字，我想包括姓氏也。例如，如果用户搜索包含姓氏或名字，我希望显示数据。有人能帮我解决这个问题吗

代码

对象数组

使用一些方法组合firstName和lastName数组。 或者返回firstName check | | lastName check

数据=[ {姓：马丁，姓：乔纳斯}， {姓：布拉德，姓：米克尔}， {姓：夏，姓：新娘}， ]; 价值=乘坐； updatedList=data.filter{firstName，lastName}=> [firstName，lastName]。一些 name=>name.toLowerCase.searchvalue.toLowerCase！==-1. ; console.logupdatedList 使用一些方法组合firstName和lastName数组。 或者返回firstName check | | lastName check

数据=[ {姓：马丁，姓：乔纳斯}， {姓：布拉德，姓：米克尔}， {姓：夏，姓：新娘}， ]; 价值=乘坐； updatedList=data.filter{firstName，lastName}=> [firstName，lastName]。一些 name=>name.toLowerCase.searchvalue.toLowerCase！==-1. ;

---

console.logupdatedList 创建一个函数，该函数接受要搜索的数组、要搜索的属性键数组和要搜索的值。若属性键数组为空，则可能不会出现任何筛选器，返回所有元素

使用数组：如果满足使用属性键之一的条件，则返回true/false。 使用string:：includes测试字符串是否包含子字符串。 按函数搜索

const searchBy = (arr = [], searchKeys = [], value = '') => {
  return arr.filter(item =>
    searchKeys.length ? searchKeys.some(key =>
      (item[key] || "").toLowerCase().includes(value.toLowerCase())
    ) : true
  );
};

用法

常数数据=[ {姓：马丁，姓：乔纳斯}， {姓：布拉德，姓：米克尔}， {姓：夏，姓：新娘}， {姓氏：阿克塞尔，姓氏：罗德}， {姓：迈克，姓：哈塞尔} ]; const searchBy=arr=[]，searchKeys=[]，value==>{ 返回arr.filteritem=> searchKeys.length？searchKeys.somekey=> 项[键]| |.toLowerCase.IncludeValue.toLowerCase ：对 ; }; console.logsearchBydata，[]，Martin； console.logsearchBydata，[lastName]； console.logsearchBydata，[firstName]，Martin； console.logsearchBydata，[firstName]，Summer；

---

console.logsearchBydata[firstName，lastName]，ax 创建一个函数，该函数接受要搜索的数组、要搜索的属性键数组和要搜索的值。若属性键数组为空，则可能不会出现任何筛选器，返回所有元素

使用数组：如果满足使用属性键之一的条件，则返回true/false。 使用string:：includes测试字符串是否包含子字符串。 按函数搜索

const searchBy = (arr = [], searchKeys = [], value = '') => {
  return arr.filter(item =>
    searchKeys.length ? searchKeys.some(key =>
      (item[key] || "").toLowerCase().includes(value.toLowerCase())
    ) : true
  );
};

用法

常数数据=[ {姓：马丁，姓：乔纳斯}， {姓：布拉德，姓：米克尔}， {姓：夏，姓：新娘}， {姓氏：阿克塞尔，姓氏：罗德}， {姓：迈克，姓：哈塞尔} ]; const searchBy=arr=[]，searchKeys=[]，value==>{ 返回arr.filteritem=> searchKeys.length？searchKeys.somekey=> 项[键]| |.toLowerCase.IncludeValue.toLowerCase ：对 ; }; console.logsearchBydata，[]，Martin； console.logsearchBydata，[lastName]； console.logsearchBydata，[firstName]，Martin； console.logsearchBydata，[firstName]，Summer；

---

console.logsearchBydata[firstName，lastName]，ax 这是你要找的吗

常数数据=[ {姓：“马丁”，姓：“乔纳斯”}， {姓：'Brad'，姓：'Mickle'}， {姓：'Summer'，姓：'Bride'} ] //anyName，可以是名字或姓氏 函数filterDataanyName{ const res=data.filtername=>name.firstName.includesanyName | | name.lastName.includesanyName 返回res； }

---

console.logfilterData'ride'这是您要找的吗

常数数据=[ {姓：“马丁”，姓：“乔纳斯”}， {姓：'Brad'，姓：'Mickle'}， {姓：'Summer'，姓：'Bride'} ] //anyName，可以是名字或姓氏 函数filterDataanyName{ const res=data.filtername=>name.firstName.includesanyName | | name.lastName.includesanyName 返回res； } 控制台。logfilterData'ride' 这是一个非常基本的检查，非常清晰和简洁，它检查名字或姓氏值是否与提供的项匹配

---

这是一个非常基本的检查，非常清晰简洁，它检查名字或姓氏值是否与提供的项目匹配。

您可以执行以下操作：

const updatedList = [
  {firstName: 'Martin', lastName :'Jonas'},
  {firstName:'Brad',lastName:'Mickle'},
  {firstName: 'Summer', lastName:'Bride'}
  ];

  updatedList = updatedList.filter(function (item) {
    return item.firstName.toLowerCase().search(value.toLowerCase()) !== -1 || 
     item.lastName.toLowerCase().search(value.toLowerCase()) !== -1;
  });

---

您可以这样做：

const updatedList = [
  {firstName: 'Martin', lastName :'Jonas'},
  {firstName:'Brad',lastName:'Mickle'},
  {firstName: 'Summer', lastName:'Bride'}
  ];

  updatedList = updatedList.filter(function (item) {
    return item.firstName.toLowerCase().search(value.toLowerCase()) !== -1 || 
     item.lastName.toLowerCase().search(value.toLowerCase()) !== -1;
  });

---

TypeError:无法读取nullCheck此行的属性“toLowerCase”>{>fitstNameTypeError:无法读取nullCheck此行的属性“toLowerCase”>{>fitstNameTypeError:无法读取nullUpdated my comment的属性'toLowerCase'。请再次检查@JonastTypeError:无法读取nullUpdated my comment的属性'toLowerCase'。请再次检查@JonasI收到此错误消息

---

---

peError:无法读取的属性“toLowerCase”null@Jonas您的一个数据数组属性名中有一个输入错误，fitstName与firstName是一样的。我们中的一些人可能对此进行了纠正，但没有大声说出来。@DrewReese，你是对的。非常感谢。我应该提一下。此代码示例jonas具有固定数据。我得到以下错误类型错误：无法读取的属性“toLowerCase”null@Jonas您的一个数据数组属性名中有一个输入错误，fitstName与firstName是一样的。我们中的一些人可能对此进行了纠正，但没有大声说出来。@DrewReese，你是对的。非常感谢。我应该提一下。jonas，这个代码示例，有固定的数据。感谢您的回答，当我在输入中键入一些东西时，例如Mike Haxel。当我输入名字并用空格填充时，它不返回任何内容。你能帮我吗check@Jonas啊，就像你在搜索字符串文字Mike Haxel？对于这一点，上面的每字段通用解决方案不会很有效，但是您需要执行类似于`${item.firstName}${item.lastName}`.toLowerCase.includeValue.toLowerCase的条件测试，在这里您构建了一个要测试的全名字符串。希望这是有意义的。@Jonas回答更新，包括运行codesandbox。感谢您的深入回答@DrewReese@DrewReese出现错误，TypeError:无法读取null的属性“toLowerCase”。。在这一行el.toLowerCase.includeValue.toLowerCaseThank上，当我在输入中键入一些东西，例如Mike Haxel时，我会询问您答案。当我输入名字并用空格填充时，它不返回任何内容。你能帮我吗check@Jonas啊，就像你在搜索字符串文字Mike Haxel？对于这一点，上面的每字段通用解决方案不会很有效，但是您需要执行类似于`${item.firstName}${item.lastName}`.toLowerCase.includeValue.toLowerCase的条件测试，在这里您构建了一个要测试的全名字符串。希望这是有意义的。@Jonas回答更新，包括运行codesandbox。感谢您的深入回答@DrewReese@DrewReese出现错误，TypeError:无法读取null的属性“toLowerCase”。。在这一行中，el.toLowerCase.includeValue.toLowerCase

updatedList = updatedList.filter(function (item) {
    if(value) {
        return item.firstName.toLowerCase().indexOf(value.toLowerCase()) > -1 || item.lastName.toLowerCase().indexOf(value.toLowerCase()) > -1;
      } else {
      return "";
      }
});

const updatedList = [
  {firstName: 'Martin', lastName :'Jonas'},
  {firstName:'Brad',lastName:'Mickle'},
  {firstName: 'Summer', lastName:'Bride'}
  ];

  updatedList = updatedList.filter(function (item) {
    return item.firstName.toLowerCase().search(value.toLowerCase()) !== -1 || 
     item.lastName.toLowerCase().search(value.toLowerCase()) !== -1;
  });