使用多个键过滤数组

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>
)

我需要获得按下时的功能，例如商店过滤器，它应该只留下商店类型的物品。如果您按 bar filter，它应该只留下带有 bar an shop 的项目，并且它应该一直工作到所有 5 个过滤器。 如果没有选择，它应该显示完整的数组。

我已经尝试从这里转换逻辑：

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

但还没有运气

Answer 1

您可以使用函数every 来检查是否所有标志都具有值false

这个代码sn-p，有一个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 一起使用：

此代码 sn-p 具有活动的 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 函数 - 而不是使用密钥调用函数，您需要存储密钥。