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

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

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

2 个答案: