基於多個 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>
    );
  }

完整代碼在這里