Reagieren Komponente nicht erkennen. Filter als Funktion

Question

So mache ich eine reaktive App für Essen Rezepte und ziehe Daten aus einer JSON-Datei. Aus irgendeinem Grund werden die .filter und .map der Rezepte nicht als Funktion angezeigt. Jede Hilfe sehr geschätzt.

In den meisten Beispielen sieht es so aus, als könnten Sie diese Informationen unter Rendern hinzufügen. Ich bin ein Noob mit beiden Codierung und reagieren, so dass ich sicher bin, es ist ein Benutzerfehler.

import React from 'react'; 
import ReadInput from'./readInput'; 
import '../Styles/Home.css'; 

class Input extends React.Component{ 
    constructor(props) { 
     super(props); 
    this.state = { 
     value:'' 
    } 
    this.handleName = this.handleName.bind(this); 
}; 
handleName(e){ 
    console.log('handleName') 
    if(e === 'chicken'){ 
      this.setState({value: 1}) 
     } else if (e === 'beef') { 
      this.setState({value: 2}) 
     } else if (e === 'rice'){ 
      this.setState({value: 3}) 
     } 

} 


render(){ 
    const menu = this.props.data.filter((recipe) => { 
      if(recipe.id === this.state.value){ 
      return recipe.dish; 
     } 
    }) 
    .map(recipe => { 
     return(
      <div> 
      <li key={recipe.id}>{recipe.dish}</li> 
      <li >{recipe.ingredients}</li> 
      </div> 
     ) 
    }) 

    return(
     <div> 
      <ReadInput 
       onChange={this.handleName} /> 
      <button className="homeButton" onClick={this.menu}>Click</button> 
      <ul className='listStyle'> 
       {menu} 
      </ul> 
     </div> 
    ) 
} 

}

export default Input; 

app Datei

import React from 'react'; 
import Input from'./Input'; 
import recipes from'../data.json'; 

class App extends React.Component{ 
    constructor(props) { 
     super(); 

} 
render(){ 
    return(
     <div> 
      <Input data={recipes} /> 
     </div> 
    ) 
} 

}

Export Standard-App;

Answer 1

Wenn this.props.data ein Objekt ist, können Sie es nicht direkt zuordnen oder filtern. Ich denke, das sollte funktionieren:

const recipes = this.props.data; 
const menu = Object.keys(recipes).filter((recipeKey) => recipes[recipeKey].id === this.state.value) 
.map(recipeKey => 
    return (
    <div key={recipes[recipeKey].id}> 
     <li>{recipes[recipeKey].dish}</li> 
     <li>{recipes[recipeKey].ingredients}</li> 
    </div> 
); 
}); 

Zuerst Sie die Tasten Ihres this.props.data filtern, damit Sie nur die Schlüssel für die Rezepte erhalten, die die ID in dem Zustand entsprechen. Dann ordnen Sie zu (noch Zuordnung mit den Schlüsseln des Objekts, nicht die Werte) und erstellen Sie die Liste.

Beachten Sie, dass ich das Schlüsselattribut an das <div>-Tag verschoben habe, da Sie dieses Attribut in der von der Map zurückgegebenen Komponente benötigen, nicht in ihren untergeordneten Elementen.

Auch in der <button className="homeButton" onClick={this.menu}>Click</button> empfängt das onClick-Attribut das Menü, aber es sollte eine Funktion erhalten, die ausgeführt wird, wenn auf die Schaltfläche geklickt wird.