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

どのように私は、選択したタグでアイテムをレンダリングすることができますか？私はこれを熟考していますか？より良いアプローチがありますか？

どうかありましたら教えてください。私はこの質問をよりよく説明できます。ありがとうございました！およそ

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

これはあなたの選択したタグを含むすべてのアイテムを返しますどのように

Answer 1

：

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

。私はここにArray.filter()、Array.some()とArray.includes()を使用することをお勧め