基于多个 select 值的过滤器

Question

我有这样格式的数据

const data = [
  {
    dealId: 1,
    name: "deal 1",
    funding_type: "D",
    category: "Industrials",
    status: "Funding",
    topic: "Latest"
  },
  {
    dealId: 2,
    name: "deal 2",
    funding_type: "E",
    category: "Financials",
    status: "Launching",
    topic: "Most Funded"
  },
  ...
]

我有四个过滤器下拉列表，我试图一次过滤多个值，但我似乎一次只能过滤一个。 我怎样才能做到这一点？

这是我的方法

  const [filteredData, setFilteredData] = useState([]);

 function myFilter(selectedValue, type, toFilterData) {
    return toFilterData.filter((item) => {
      const filter = {
        category: true,
        type: true,
        status: true,
        topic: true
      };

      if (type === "category")
        filter.category = item.category === selectedValue;

      if (type === "type") filter.type = item.funding_type === selectedValue;

      if (type === "status") filter.status = item.status === selectedValue;

      if (type === "topic") filter.topic = item.topic === selectedValue;

      return filter.category && filter.type && filter.status && filter.topic;
    });
  }

  function handleChangeTest(e, type) {
    const arr = myFilter(e.target.value, type, data);

    setFilteredData(arr);
  }

   return (

       <select
          id="filter-sector"
          className="input-field cursor-pointer"
          onChange={(e) => handleChangeTest(e, "topic")}
          onSelect={(e) => handleChangeTest(e, "topic")}
        >
          {topicOptions.map((sector) => (
            <option value={sector.value} key={sector.value}>
              {sector.placeholder}
            </option>
          ))}
        </select>
    
    // ... other selects

    filteredData.length > 0
      ? filteredData.map((d) => <div>{d.name}</div>)
      : null
  );

你可以在这里看到我的完整代码CodeSandbox

Answer 1

如果过滤器 object 的每个道具都设置为 true，为什么还要检查过滤器？ 假设您的参数类型一次可以有一个值，类似下面的代码应该可以工作。

   function myFilter(selectedValue, type, toFilterData) {
    return toFilterData.filter((item) => {
        switch (type) {
            case "category":
                return item.category === selectedValue
            case "type":
                return item.funding_type === selectedValue
            case "status":
                return item.status === selectedValue
            case "topic":
                return item.topic === selectedValue
            default:
                return false
        }
    });
}

Answer 2

结果我一直在过滤我的原始数据而不是来自其他选定类别的过滤数据，改变我的渲染 function 和 onChange function 作品

从这个答案中得到了一些参考

function renderList() {
    let filteredItems = testData.data;

    ["category", "funding_type", "status", "topic"].forEach(function (
      filterBy
    ) {
      const filterValue = testData[filterBy];
      if (filterValue) {
        filteredItems = filteredItems.filter(function (item) {
          return item[filterBy] === filterValue;
        });
      }
    });

    console.log(filteredItems);
    return (
      <div className="container">
        <div className="filter-form">
          <FilterItems data={filteredItems} />
        </div>
      </div>
    );
  }

完整代码在这里