如何过滤多个属性

Question

我正在尝试一次过滤许多属性。现在，我只能过滤一个属性。例如，我想按类型，位置和体验进行过滤。假设我要type = PART_TIME location = bangalore and experience = less than 2的视图会返回

{
  id: 1,
  type: "PART_TIME",
  name: "Akash",
  location: "bangalore",
  experience: 1
},

这是下面的代码和沙箱https://codesandbox.io/s/heuristic-pine-zwt4o?file=/src/Search.js

import "./Search.css";

class Search extends React.Component {
  constructor() {
    super();
    this.state = {
      filterList: [
        {
          id: 11,
          name: "Part Time",
          value: "PART_TIME"
        },
        {
          id: 12,
          name: "Full Time",
          value: "FULL_TIME"
        },
        {
          id: 13,
          name: "Freelancer",
          value: "FREELANCER"
        },
        {
          id: 14,
          name: "mumbai",
          value: "MUMBAI"
        },
        {
          id: 15,
          name: "feroz",
          value: "FEROZ"
        },
        {
          id: 16,
          name: "experience",
          value: "EXPERIENCE"
        }
      ],
      searchLists: [
        {
          id: 1,
          type: "PART_TIME",
          name: "Akash",
          location: "bangalore",
          experience: 1
        },
        {
          id: 2,
          type: "PART_TIME",
          name: "feroz",
          location: "mumbai",
          experience: 3
        },
        {
          id: 3,
          type: "FULL_TIME",
          name: "Farheen",
          location: "agra",
          experience: 5
        },
        {
          id: 4,
          type: "FREELANCER",
          name: "Raju",
          location: "chennai",
          experience: 6
        },
        {
          id: 5,
          type: "FULL_TIME",
          name: "Asif",
          location: "vegas",
          experience: 7
        }
      ],
      activeFilter: []
    };
  }

  onFilterChange(filter) {
    const { filterList, activeFilter } = this.state;
    if (filter === "ALL") {
      if (activeFilter.length === filterList.length) {
        this.setState({ activeFilter: [] });
      } else {
        this.setState({
          activeFilter: filterList.map((filter) => filter.value)
        });
      }
    } else {
      if (activeFilter.includes(filter)) {
        const filterIndex = activeFilter.indexOf(filter);
        const newFilter = [...activeFilter];
        newFilter.splice(filterIndex, 1);
        this.setState({ activeFilter: newFilter });
      } else {
        this.setState({ activeFilter: [...activeFilter, filter] });
      }
    }
  }

  render() {
    const { filterList, activeFilter } = this.state;
    let filteredList;
    if (
      activeFilter.length === 0 ||
      activeFilter.length === filterList.length
    ) {
      filteredList = this.state.searchLists;
    } else {
      filteredList = this.state.searchLists.filter((item) =>
        this.state.activeFilter.includes(item.type)
      );
    }
    return (
      <div className="searchContainer">
        <form>
          <label htmlFor="myInput">All</label>
          <input
            id="myInput"
            type="checkbox"
            onClick={() => this.onFilterChange("ALL")}
            checked={activeFilter.length === filterList.length}
          />
          {this.state.filterList.map((filter) => (
            <React.Fragment>
              <label htmlFor={filter.id}>{filter.name}</label>
              <input
                id={filter.id}
                type="checkbox"
                checked={activeFilter.includes(filter.value)}
                onClick={() => this.onFilterChange(filter.value)}
              />
            </React.Fragment>
          ))}
        </form>
        <ul style={{ marginLeft: "70px" }}>
          {filteredList.map((item) => (
            <div key={item.id}>
              <li>
                {item.name} -- {item.type}
              </li>
            </div>
          ))}
        </ul>
      </div>
    );
  }
}

export default Search;

Answer 1

一种动态方法是创建一个函数，该函数需要一个列表和一些用于过滤器的参数。下面的示例使用一个对象，您可以在其中指定属性值以获取过滤结果。

const searchLists=[{id:1,type:"PART_TIME",name:"Akash",location:"bangalore",experience:1},{id:2,type:"PART_TIME",name:"feroz",location:"mumbai",experience:3},{id:3,type:"FULL_TIME",name:"Farheen",location:"agra",experience:5},{id:4,type:"FREELANCER",name:"Raju",location:"chennai",experience:6},{id:5,type:"FULL_TIME",name:"Asif",location:"vegas",experience:7}];

const filterList = (list, filterArgs) => 
  list.filter(item => 
    Object.entries(filterArgs).every(([prop, value]) => 
      typeof item[prop] === 'number' ?
        item[prop] <= value :
        item[prop] === value
    )
  );
  
const resultsFullTimeSixYearsExperience = filterList(searchLists, {
  type: 'FULL_TIME',
  experience: 6
});

const resultPartTimeMumbai = filterList(searchLists, {
  type: 'PART_TIME',
  location: 'mumbai'
});
  
console.log('Full time with 6 years or less experience', resultsFullTimeSixYearsExperience);
console.log('Part time in mumbai query', resultPartTimeMumbai);