javascript - 通过 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 );