Filtrage à travers 3 tableaux pour trier les données

Question

Je travaille sur un projet qui vous permet de trier les éléments en fonction des tags sélectionnés. Voici le problème sur lequel j'ai été bloqué:

J'ai un tableau d'éléments. Chaque élément est un objet qui a une propriété de balises. La propriété tags est un tableau des tags associés à cet élément.

Il y a un composant déroulant qui vous permet de sélectionner les balises vers lesquelles vous souhaitez réduire vos résultats. Vous pouvez avoir plusieurs tags sélectionnés à la fois. La liste déroulante est un tableau de tags. J'ai tout fonctionné excepté pour rendre les articles basés sur les étiquettes choisies.

données par exemple (stockées dans Redux):

const obj = { 

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

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

Le code ci-dessous rend tous mes articles sur la page.

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

Ma pensée va dans le sens de ce (que je sais est vraiment déroutant):

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

Comment puis-je rendre uniquement les éléments avec les balises sélectionnés? Suis-je en train de penser cela? Est-ce qu'il y a une meilleure approche?

S'il vous plaît laissez-moi savoir s'il y a de toute façon je peux mieux expliquer cette question. Je vous remercie!

Answer 1

Je suggère d'utiliser Array.filter(), Array.some() et Array.includes() ici:

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

Que diriez-vous

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

Cela vous ramènera tous les éléments qui contiennent la balise sélectionnée.