过滤3个数组对数据进行排序

Question

我正在做一个项目，让您根据所选标签对项目进行排序。这是我一直坚持的问题：

我有一系列项目。每个项目都是一个具有标签属性的对象。 tags 属性是与该项目关联的标签的数组。

有一个下拉组件可让您选择要将结果缩小到哪些标签。您可以一次选择多个标签。下拉列表是一组标签。除了根据所选标签呈现项目外，我一切正常。

示例数据（存储在redux中）：

const obj = {

const items = [
    { id: 1, name: "car", tags: ["technology", "vehicle"] },
    {id: 2, name: "bike", tags: ["outdoors"] }
]

const dropdownValues = ["vehicle","indoor","technology", "outdoors"]}

下面的代码将我的所有项目呈现到页面上。

class ItemCardList extends Component{
    render(){
        let data = this.props.itemsData; //this is all of the items data
        let tags = this.props.tags; //these are the selected dropdown tags stored in redux
        return (
            <Masonry>
                {data.map((item) => {
                    return <div><ItemCard key={item.id} item={item}/></div>
                })}
            </Masonry>
        )
    }
}

const mapStateToProps = state => ({
    tags: state.items.tags,
    itemsData: state.items.itemsData,
});
export default connect(mapStateToProps)(ItemCardList);

我的想法是这样的（我知道这真的很混乱）：

{data.filter((item) => item.tags.map(tag => tag == tagsArray.map(tagArr => tagArr))

我怎样才能只呈现带有选定标签的项目？这是我想太多了吗？有更好的方法吗？

如果有什么我可以更好地解释这个问题的，请告诉我。谢谢！

Answer 1

我建议在这里使用Array.filter()、Array.some() 和Array.includes()：

//tells us whether a tag should be shown
const isTagVisible = tag => this.props.tags.includes( tag ); 

//tells us whether an item has any tags that should be shown
const doesItemHaveAnyVisibleTags = item => item.tags.some( isTagVisible ); 

//filters only items that have any tags that should be shown
const filteredItems = items.filter( doesItemHaveAnyVisibleTags );

Answer 2

怎么样

items.filter(
   item => item.tags.some(
        tag => yourDropdownList.indexOf(tag) !== -1
   )
)

这将返回包含所选标签的所有项目。