Filtern von 3 Arrays zum Sortieren von Daten

Question

Ich arbeite an einem Projekt, mit dem Sie Elemente basierend auf den ausgewählten Tags sortieren können. Hier ist das Problem, auf das ich geklebt habe:

Ich habe eine Reihe von Elementen. Jedes Objekt ist ein Objekt mit einer Eigenschaft von Tags. Die Eigenschaft tags ist ein Array der Tags, die diesem Element zugeordnet sind.

Es gibt eine Dropdown-Komponente, mit der Sie auswählen können, auf welche Tags Sie Ihre Ergebnisse eingrenzen möchten. Sie können mehrere Tags gleichzeitig auswählen. Das Dropdown ist ein Array von Tags. Ich habe alles außer dem Rendern der Elemente basierend auf den ausgewählten Tags.

Beispieldaten (in redux gespeichert):

const obj = { 

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

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

Der Code unten alle meine Artikel auf die Seite macht.

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

Mein Denken geht in die Richtung von dieser (was ich weiß wirklich verwirrend ist):

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

Wie kann ich machen nur die Elemente mit den Tags ausgewählt? Übertreibe ich das? Gibt es einen besseren Ansatz?

Bitte lassen Sie mich wissen, wenn es trotzdem gibt, kann ich diese Frage besser erklären. Vielen Dank!

Answer 1

Ich schlage vor, mit Array.filter(), Array.some() und Array.includes() hier:

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

Wie wäre es

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

Dadurch werden Sie alle Elemente zurück, die den ausgewählten Tag enthalten.