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

我正在研究一个项目，让我们根据所选标签对项目进行排序。这里是我一直卡在的问题：通过3个数组进行过滤以对数据进行排序

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

有一个下拉组件让你选择你想缩小结果的标签。您可以一次选择多个标签。下拉列表是一组标签。除了基于所选标签呈现项目之外，我已经可以工作了。

的示例数据（存储在终极版）：

const obj = { 

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

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

下面的代码使我的所有项目到页面上。

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

如何我只能渲染标签的项目中选择：

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

我的想法沿此线（我知道是真是混乱）去？我是否在说这个？有更好的方法吗？

请让我知道如果有反正我可以更好地解释这个问题。谢谢！

来源

2017-10-17 Jean-Marie Dalmasso

我建议使用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);

来源

2017-10-17 22:50:17

正是我需要的。谢谢邓肯！ –

没问题！祝你的项目好运！ –

如何

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

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

来源

2017-10-17 22:42:20

问题说，有可能是由用户选择多个标签。 –

更新了片段。 –

这是一个很好的答案。 –

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

回答

相关问题