如何在 React 中过滤多个值

Question

我正在尝试搜索一个数组，但同时我可以搜索我想要实现的名字，我也想包含姓氏。例如，如果用户搜索包含姓氏或名字我想显示数据。有人可以帮我解决这个问题。

代码

 handleByNameChange = (e) => {
    let value = e.target.value;
    let updatedList = this.props.userData.allUsersForFilter;
    updatedList = updatedList.filter(function (item) {
      return item.firstName.toLowerCase().search(value.toLowerCase()) !== -1;
    });

    this.setState({
      byNameInputValue: value,
      items: updatedList,
    });
  };

对象数组

[
{firstName: 'Martin', lastName :'Jonas'},
{firstName:'Brad',lastName:'Mickle'},
{fitstName: 'Summer, lastName:'Bride'}
]

Answer 1

创建一个函数，该函数接受要搜索的数组、要搜索的属性键数组以及要搜索的值。如果属性键数组为空，则可能不会出现过滤器，返回所有元素。

• 如果满足使用属性键条件之一，则使用 array:some 返回真/假。
• 使用 string::includes 测试字符串是否包含子字符串。

搜索功能

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

用法

handleByNameChange = (e) => {
  const { value } = e.target;
  const updatedList = this.props.userData.allUsersForFilter;

  this.setState({
    byNameInputValue: value,
    items: searchBy(updatedList, ['firstName', 'lastName'], value),
  });
};

const data = [
  { firstName: "Martin", lastName: "Jonas" },
  { firstName: "Brad", lastName: "Mickle" },
  { firstName: "Summer", lastName: "Bride" },
  { firstName: "Axel", lastName: "Rod" },
  { firstName: "Mike", lastName: "Haxel" }
];

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

console.log(searchBy(data, [], "Martin"));
console.log(searchBy(data, ["lastName"], ""));
console.log(searchBy(data, ["firstName"], "Martin"));
console.log(searchBy(data, ["firstName"], "Summer"));
console.log(searchBy(data, ["firstName", "lastName"], "ax"));

附录 - 搜索组合全名

const searchByName = (arr = [], value = "") => {
  return arr.filter(({ firstName = '', lastName = '' }) =>
    [firstName, lastName, `${firstName} ${lastName}`].some(el =>
      el.toLowerCase().includes(value.toLowerCase())
    )
  );
};

尝试匹配名字或姓氏，然后是全名

const data = [
  { firstName: "Martin", lastName: "Jonas" },
  { firstName: "Brad", lastName: "Mickle" },
  { firstName: "Summer", lastName: "Bride" },
  { firstName: "Axel", lastName: "Rod" },
  { firstName: "Mike", lastName: "Haxel" }
];

const searchByName = (arr = [], value = "") => {
  return arr.filter(({ firstName = '', lastName = '' }) =>
    [firstName, lastName, `${firstName} ${lastName}`].some(el =>
      el.toLowerCase().includes(value.toLowerCase())
    )
  );
};

console.log(searchByName(data, "Martin"));
console.log(searchByName(data, ""));
console.log(searchByName(data, "Summer"));
console.log(searchByName(data, "ax"));
console.log(searchByName(data, "Mike Ha"));

沙盒演示中的所有代码

Answer 2

使用some 方法组合firstName 和lastName 数组。 (或者返回 (firstName check || lastName check)

data = [
  { firstName: "Martin", lastName: "Jonas" },
  { firstName: "Brad", lastName: "Mickle" },
  { firstName: "Summer", lastName: "Bride" },
];
value = "ride";
updatedList = data.filter(({ firstName, lastName }) =>
  [firstName, lastName].some(
    (name) => name.toLowerCase().search(value.toLowerCase()) !== -1
  )
);

console.log(updatedList);

Answer 3

这是您要找的吗？

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

//anyName , which might be first Name or last Name

function filterData(anyName){
        const res = data.filter(name => (name.firstName.includes(anyName)||name.lastName.includes(anyName)))
        return res;
}


console.log(filterData('ride'))

Answer 4

你可以这样做：

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;
  });

Answer 5

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

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