Elemente von array.map rendern nicht

Question

Ich versuche, Elemente aus meinem Zustand (Array) zu rendern, aber sie wollen nicht auf dem Bildschirm zu rendern. Wenn ich console.log(b.name) führe, protokolliert er meine Namen in der Konsole.

renderAllElements() { 
    this.state.myData.map(b => { 
     return(
      <div> 
       <h4>{b.name}</h4> 
      </div> 
     ) 
    }) 
} 

render() { 
    return (
     <div> 
      {this.renderAllElements()} 
     </div> 
    ) 
} 

Answer 1

Sie benötigen eine Karte, um wieder zurück:

renderAllElements() { 
    return this.state.myData.map(b => { 
     return(
     <div> 
      <h4>{b.name}</h4> 
     </div> 
    ) 
    }) 
} 

Answer 2

Sie Ihre renderAllElements() Funktion in Ihrem Render-Methode korrekt aufgerufen wird. Sie scheinen auch Ihre Array-Variable korrekt zuzuordnen, aber die Funktion gibt nach der Beendigung des Mappings nichts mehr zurück, um gerendert zu werden.

einfach eine Rückkehr für die Kartenfunktion hinzufügen und es sollte funktionieren:

renderAllElements() { 
    return this.state.myData.map(b => { 
     return(
     <div> 
      <h4>{b.name}</h4> 
     </div> 
    ) 
    }) 
} 

Einzeiler Alternative:

renderAllElements() { 
    return this.state.myData.map(b => <div><h4>{b.name}</h4></div>); 
} 

Answer 3

Da Sie bereits Array-Funktionen nutzen zu können alternativ ohne geschweifte Klammern neu schreiben können :

renderAllElements =() => (
    this.state.myData.map(b => (
     <div> 
      <h4>{b.name}</h4> 
     </div> 
    )); 
) 

So müssen Sie nicht über Rückkehr Anweisung erinnern :)