过滤提取数据到复选框 react.js

Question

也许有人知道如何过滤复选框中的数据。我已经有一个标签过滤器，但我不知道如何转换它以额外过滤我的价格。
我需要按价格过滤，例如我的价格是 9.99 美元、24.49 美元和 19.98 美元 20.00 美元 - 我需要做一个过滤器：
"<$10", "$10- $20", ">$20"

此处演示：https://codesandbox.io/s/blissful-sound-b3vm3?file=/src/App.js

从data.json

获取数据

  function search(data) {
    return data.filter(
      (item) =>
        (filterParam === 'All' || item.tags.includes(filterParam)) &&
        (searchParam.length === 0 ||
          (searchParam.every((tag) => item.tags.includes(tag)) &&
            JSON.stringify(item).toLowerCase().indexOf(q.toLowerCase()) > -1))
    )
  }

Answer 1

添加第二个过滤器和状态对象，并按新参数过滤。

const [priceFilterParam, setPriceFilterParam] = useState("All");

function search(data) {
  return data.filter(
    ...
  ).filter(item => {
    const price = parseFloat(item.price.substring(1));
    return (priceFilterParam === "All") ||
      (priceFilterParam === "Low" && price <= 10) || 
      (priceFilterParam === "Medium" && price > 10 && price <= 20) ||
      (priceFilterParam === "High" && price > 20)
  })
}

过滤提取数据到复选框 react.js

Filter fetch data to checkboxes react.js

database

filter

fetch

reactjs

fetch-api