Javascript 如何同时按多个选项进行筛选，复选框

我已经设置了一个复选框过滤器。我是按品牌或类型过滤的。使用我当前的代码，我可以按品牌或类型过滤，但不能按品牌和类型过滤

我希望能够通过品牌和类型进行过滤

我原以为我已经明白了这一点，但睡眠不足正折磨着我，目前我似乎无法解决这个问题，因此任何帮助都将不胜感激

---

我当前的代码：

guns.jsx

const Guns = (props) => {
  const { guns } = props

  if (!guns) {
    return (
      <Layout>
        <div className="flex justify-center items-center min-h-vh">
          <Image src="/loading.gif" width={500} height={300} />
        </div>
      </Layout>
    )
  }

  const [checkedInputs, setCheckedInputs] = useState({})

  const handleInputChange = (event) => {
    setCheckedInputs({ ...checkedInputs, [event.target.value]: event.target.checked })
  }

  useEffect(() => {
    console.log('Checked Inputs', checkedInputs)
  }, [checkedInputs])


  // Get categories for the Gun filter.
  const getCategories = () => {
    const findCategories = guns.map(gun => {
      return gun.Type
    })

    const filterCategories = findCategories.filter((category, index) => findCategories.indexOf(category) === index).sort()

    const categories = filterCategories.map((cat, index) => {
      return {
        categories: {
          catID: index,
          name: cat
        }
      }
    })

    return categories
  }


  //Get brands for the Gun filter.
  const getBrands = () => {
    const findBrands = guns.map(gun => {
      return gun.Make
    })

    const filterBrands = findBrands.filter((brand, index) => findBrands.indexOf(brand) === index).sort()

    const brands = filterBrands.map((brand, index) => {
      return {
        brands: {
          brandID: index,
          name: brand
        }
      }
    })

    return brands
  }



  return (
    <Layout>
      <div className="flex mx-96">
        <div className="w-1/4">
          <GunFilter categories={getCategories()} brands={getBrands()} handleInputChange={handleInputChange} checkedInputs={checkedInputs} />
        </div>
        <div className="w-3/4">
          <div className="grid grid-cols-3 gap-2 lg:my-12 lg:justify-center">
            {guns.map(gun => {
              if (gun.ImageCount > 1) {
                // If no options boxes selected
                if (Object.keys(checkedInputs).length < 1 || Object.keys(checkedInputs).every(value => checkedInputs[value] === false)) {
                  return <GunProductCard gun={gun} />
                }

                for (const [key, value] of Object.entries(checkedInputs)) {
                  if (value === true) {
                    if (key === gun.Type || key === gun.Make) {
                      return (
                        <GunProductCard gun={gun} />
                      )
                    }
                  }
                }
              }
            })}
          </div>
        </div>
      </div>
    </Layout >
  )
}

export async function getStaticProps() {
  const res = await fetch(process.env.GUNTRADER_API)
  const data = await res.json()
  const guns = data.Guns

  return {
    props: {
      guns
    },
    revalidate: 600
  }
}

const Guns=（道具）=>{
const{guns}=道具
如果（！枪）{
返回(
)
}
常量[checkedInputs，setCheckedInputs]=useState（{}）
常量handleInputChange=（事件）=>{
setCheckedInputs（{…checkedInputs，[event.target.value]：event.target.checked}）
}
useffect（（）=>{
log（'Checked input'，checkedInputs）
}，[checkedInputs]）
//获取枪过滤器的类别。
常量getCategories=（）=>{
const findCategories=guns.map（gun=>{
回程枪，类型
})
const filterCategories=findCategories.filter（（类别，索引）=>findCategories.indexOf（类别）==index.sort（）
const categories=filterCategories.map（（目录，索引）=>{
返回{
类别：{
catID:索引，
姓名：猫
}
}
})
退货类别
}
//获取枪过滤器的品牌。
const getBrands=（）=>{
const findBrands=guns.map（gun=>{
回击枪，准备好
})
const filterBrands=findBrands.filter（（品牌，索引）=>findBrands.indexOf（品牌）==index.sort（）
const brands=filterBrands.map（（品牌，索引）=>{
返回{
品牌：{
布兰迪德：索引，
名称：品牌
}
}
})
回归品牌
}
返回(
{guns.map（gun=>{
如果（gun.ImageCount>1）{
//如果未选择任何选项框
if（Object.keys（checkedInputs）.length<1 | | Object.keys（checkedInputs）.every（value=>checkedInputs[value]==false））{
返回
}
for（Object.entries（checkedInputs））的常量[key，value]{
如果（值===true）{
如果（键===gun.Type | |键===gun.Make）{
返回(
)
}
}
}
}
})}
)
}
导出异步函数getStaticProps（）{
const res=wait fetch（process.env.GUNTRADER\u API）
const data=await res.json（）
常量枪=数据枪
返回{
道具：{
枪
},
重新验证日期：600
}
}

GunFilter.jsx

const GunFilter = (props) => {
  const { categories, brands, handleInputChange, checkedInputs } = props

  return (
    <div className="text-black my-24">
      <h4 className="p-2 border-b-2 border-r-2 font-bold">Filter By</h4>
      <div className="p-2 my-2 border-r-2 border-b-2">
        <h5 className="mb-2 font-semibold">Category</h5>
        {categories.map(cat => {
          return (
            <div>
              <input type="checkbox" id={cat.categories.name} value={cat.categories.name} checked={checkedInputs[cat.categories.name]} onChange={handleInputChange} />
              <label key={cat.categories.name} className="ml-2" htmlFor={cat.categories.name}>{cat.categories.name}</label>
            </div>
          )
        })}
      </div>
      <div className="p-2 my-2 border-r-2 border-b-2">
        <h5 className="mb-2 font-semibold">Brand</h5>
        {brands.map(brand => {
          return (
            <div>
              <input type="checkbox" id={brand.brands.name} value={brand.brands.name} checked={checkedInputs[brand.brands.name]} onChange={handleInputChange} />
              <label key={brand.brands.name} className="ml-2" htmlFor={brand.brands.name}>{brand.brands.name}</label>
            </div>
          )
        })}
      </div>
    </div>
  )
}

export default GunFilter

const GunFilter=（道具）=>{
const{categories，brands，handleInputChange，checkedInputs}=props
返回(
过滤
类别
{categories.map（cat=>{
返回(
{cat.categories.name}
)
})}
烙印
{brands.map（品牌=>{
返回(
{brand.brands.name}
)
})}
)
}
导出默认GunFilter

您可以使用

和&

传递品牌和类型。有了你已经做过的，这应该很容易。我想用

&&

代替

|

。但它不起作用。在选择过滤器时，如果使用&¬hing，则返回结果。我认为主要的问题是在

checkedInputs

上的for，您只希望在任何给定的循环迭代中匹配一个或另一个条件。首先使用array.prototype.filter，然后映射结果会更有意义。Nsoseka认为您需要一个逻辑&&，这是正确的，但您需要同时满足所有过滤条件。我同意。您的意思是使用.filter来过滤掉值===true吗？不，类似于

guns.filter（gun=>conditions？conditions.every（…）：true）。map（…

）。