如何在 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,
    });
  };

object 陣列

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

Answer 1

創建一個 function，它需要一個要搜索的數組、要搜索的屬性鍵數組以及要搜索的值。 如果屬性鍵數組為空，則可能不應該出現過濾器，返回所有元素。

• 如果滿足使用屬性鍵條件之一，則使用 array:some 返回真/假。
• 使用 string::includes 測試字符串是否包含 ZE83AED3DDF4667DEC0DAAAACB2BB3BE0BZ。

searchBy function

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

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

這是一個非常基本的檢查，簡潔明了，它檢查名字或姓氏值是否與提供的項目匹配。

Answer 5

你可以這樣做：

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