Фильтровать массив с использованием нескольких ключей

Question

Я пытаюсь сделать сетку с несколькими переключающими фильтрами. Я использую перехватчики реагирования.

Это массив данных:

const items = [
    {
        name: 'hotel1',
        type: 'hotel'
    },
    {
        name: 'bar1',
        type: 'bar'
    },{
        name: 'entertainment1',
         type: 'entertainment'
    },{
        name: 'equipment1',
        type: 'equipment'
    },
    {
        name: 'shop1',
        type: 'shop'
    }
]


    const initialFilters = [
        {
            id: 1,
            active: false,
            type: 'bar'
        },
        {
            id: 2,
            active: false,
            type: 'shop'
        },
        {
            id: 3,
            active: false,
            type: 'hotel'
        },
        {
            id: 4,
            active: false,
            type: 'entertainment'
        },
        {
            id: 5,
            active: false,
            type: 'equipment'
        },
    ];

const [data, setData] = useState(items);
const [filterItems, setFilteredItems] = useState(initialFilters);

В настоящее время я фильтрую с использованием одного ключа, который передается

const mainFilter = (key) => {
 setData(items.filter(x => x.type === key));
}

, и кнопок фильтрации. с сеткой отображаются имена элементов:

return (
    <div>
        <ul>
            {filterItems.map(x =>
                <li key={x.type}><a
                    className={x.active == true ? 'active' : ''}
                    onClick={() => mainFilter(x.type)}>
                    {x.type}
                </a></li>
            )}
        </ul>
     <div>{data.map(item => <div>{item.name}</div>}</div>
    </div>
)

Мне нужно получить функциональность, при которой при нажатии, например, фильтра магазина, должны оставаться только элементы с типом магазина. Если вы нажмете на кнопку «Фильтр бара», он должен оставить только товары с барами в магазине, и он должен работать до всех 5 фильтров. если ни один из них не выбран, он должен отображать полный массив.

Я пытался преобразовать логи c из этого:

https://gist.github.com/jherax/f11d669ba286f21b7a2dcff69621eb72#file -filterplainarray- js

но пока не повезло

Answer 1

Вы можете использовать функцию every для проверки, имеют ли все флаги значение false

Этот фрагмент кода имеет initialFilter со всеми флагами, равными false

const items = [{name: 'hotel1',type: 'hotel'},{name: 'bar1',type: 'bar'}, {name: 'entertainment1',type: 'entertainment'}, {name: 'equipment1',type: 'equipment'},{name: 'shop1',type: 'shop'}];
const initialFilters = [{id: 1,active: false,type: 'bar'},{id: 2,active: false,type: 'shop'},{id: 3,active: false,type: 'hotel'},{id: 4,active: false,type: 'entertainment'},{id: 5,active: false,type: 'equipment'}];

let allFalse = initialFilters.every(({active}) => !active);
if (allFalse) console.log(items);

В противном случае вы можете использовать функцию filter вместе с функцией some:

Этот фрагмент кода имеет значение shop и entertainment

const items = [{name: 'hotel1',type: 'hotel'},{name: 'bar1',type: 'bar'}, {name: 'entertainment1',type: 'entertainment'}, {name: 'equipment1',type: 'equipment'},{name: 'shop1',type: 'shop'}];
const initialFilters = [{id: 1,active: false,type: 'bar'},{id: 2,active: true,type: 'shop'},{id: 3,active: false,type: 'hotel'},{id: 4,active: true,type: 'entertainment'},{id: 5,active: false,type: 'equipment'}];

let fltered = items.filter(({type}) => initialFilters.some(({type: t, active}) => t === type && active));
console.log(fltered);

Answer 2

Вы можете сохранить выбранные ключи, а затем отсортировать их, проверив, включены ли они:

const mainFilter = (keys) => {
 setData(items.filter(x => keys.includes(x.type)));
}

Эта реализация потребует изменения вашей onClick функции - вместо вызова функции с ключом, который вы Вам нужно будет хранить ключи.