Как я могу настроить состояние редукции с несколькими фильтрами в проекте React?

Question

Это мое состояние редукции:

    products: [
        {
            id: 1,
            name: 'Ps4',
            price: 4500000,
            number: 0,
            inCart: false,
            category: 'electronics',
            brand: 'sony',
            subCategory: 'game',
            img: 'ps4',
            stockNumber: 4,
            off: false,
            offPrice: null
        },
        {
            id: 24,
            name: 'Gucci',
            price: 7210000,
            number: 0,
            inCart: false,
            category: 'outfit',
            brand: 'gucci',
            subCategory: 'bag',
            img: 'gucci-bag',
            stockNumber: 2,
            off: false,
            offPrice: null
        },
        {
            id: 10,
name : 'Phone',
            price: 5800000,
            inCart: false,
            category: 'electronics',
            brand: 'samsung',
            subCategory: 'mobile',
            img: 'a70',
            stockNumber: 3,
            off: true,
            offPrice: 6000000
        }
]

И я l oop через и отображаю в компоненте, как они

    {props.products.map((item) => {
            return <div key={item.id}>{item.name}</div>
)}

Теперь я хочу отфильтровать их с помощью несколько флажков ввода, поэтому, когда они отмечены, он фильтрует их и отображает только те, у которых stockNumber> 2, например, или несколько условий, а когда он не установлен, он просто получает целые продукты.

<input onChange={()=>handleFilter('filter by stockNumber > 3')} />
<input onChange={()=>handleFilter('filter by inCart === false')} />
<input onChange={()=>handleFilter('filter by price > 200')} />

Как я могу этого добиться и сколько функций заставит это работать?

Answer 1

Вы должны немного изменить logi c в псевдо js примерно так:

<input type="checkbox" onChange={toggleFilter1} />
<input type="checkbox" onChange={toggleFilter2} />
<input type="checkbox" onChange={toggleFilter3} />

  const filter1Enabled = input1Ref.checked // or state.input1Checked
  // ...

  const filteredProducts = props.products.filter(item => {
    if (filter1Enabled && doesntPass1(item)) return false
    if (filter2Enabled && doesntPass2(item)) return false
    if (filter3Enabled && doesntPass3(item)) return false
    return true
  })

  return (
    <>
      { filteredProducts.map(item => <div key={item.id}>{item.name}</div>) }
    </>
  )

Итак, в основном, вы должны отслеживать, какие фильтры включены, а затем применяйте их в фильтре по одному.