Wie kann ich über zwei Arrays zuordnen und Übereinstimmungen als Schaltflächen zurückgeben?

Question

Ich habe ein Array von Schlüsselwörtern und ein Array von Objekten. Das Schlüsselwortarray stimmt mit einem Titel innerhalb eines Objekts aus dem Array von Objektdaten überein. Ich möchte alle Objekte, die nach einer Schlüsselwortübereinstimmung suchen, zuordnen und diesen Objekttitel zurückgeben. Ich möchte dies für jedes Schlüsselwort in meinem Schlüsselwort-Array tun.

Im Moment kann ich es nur für ein Schlüsselwort innerhalb des Schlüsselwortarrays arbeiten. Im Grunde genommen, wenn ich ...

keywords = [ "sink", "Wanne", "Pinsel"]

Und meine Array von Objekten enthält eine obj.title, die diese Schlüsselwörter entsprechen, es wird nur eins von ihnen übereinstimmen und wird eine Schaltfläche mit dem Namen "Senke" zurückgeben.

Ich kann nicht scheinen, durch alle meine Schlüsselwörter Array iterieren, aber ich bin durch meine Reihe von Objekten iterieren.

data = Array von Objekten

keywords = Array von Schlüsselwörtern

Ziel über Daten für die Spiele in meinem Schlüsselwörtern suchen abzubilden ist, wenn ich ein Spiel finden, möchte ich eine Schaltfläche mit dem Titel der übereinstimmenden Objekte zurückgeben. Das Problem dabei ist, dass es nicht über das keyWords-Array iteriert. Wenn ich etwas wie keyWords [0] hinzufüge, kann ich mir das spezifische Element für eine Übereinstimmung ansehen, aber ich möchte über alle Schlüsselwörter iterieren und alle Übereinstimmungen finden.

const renderKeyButtons = this.props.data.filter(obj => { 
    return this.state.keyWords === obj.title; 
    }).map((obj, idx) => { 
     return (
      <button key={idx}>{obj.title}</button> 
     ); 
}); 

Meine Vermutung ist, dass ich etwas hinzufügen müssen über die Schlüsselwörter auf der Karte, wie eine zusätzliche (Karte, idx) => Funktion, aber ich bin nicht sicher, wie dies zu tun und alle Tasten Rückkehr an Einmal.

Answer 1

Sie versuchen, ein Array mit einer Zeichenfolge zu vergleichen. Verwenden Sie Array#includes(), um zu sehen, wenn der String in Array ist

const renderKeyButtons = this.props.data.filter(obj => { 
    return this.state.keyWords.includes(obj.title); 
    }).map((obj, idx) => { 
     return (
      <button key={idx}>{obj.title}</button> 
     ); 
}); 

Answer 2

Verwenden Array.prototype.includes() Methode, es zu erreichen, ohne Iteration wie diese

const renderKeyButtons = this.props.data.filter(obj => { 
    return this.state.keyWords.includes(obj.title); 
    }).map((obj, idx) => { 
     return (
      <button key={idx}>{obj.title}</button> 
     ); 
});