Komponente in JSX wird nicht geladen?

Question

Ich habe einige Probleme mit React keine Daten an eine Komponente Requisiten in Bezug Anzeigen:

import React from 'react'; 

import {ItemListing} from './ItemListing.js'; 

export var SearchResults = React.createClass({ 
    render: function() { 
     console.log('Render called! SearchResults props', this.props); // Fires and displays data as expected 
     return (
      <div> 
       {this.props.items.forEach(function(item) { 
        console.log(item); // Fires correctly 
        <ItemListing item={item} /> // Does not run - a console.log() inside the render method of this component does not fire 
       })} 
      </div> 
     ) 
    } 
}); 

Diese Komponente innerhalb der übergeordneten als <SearchResults items={this.state.items} /> geladen wird, und die console.log() in der Render-Funktion oben besagt die Requisiten wie erwartet geladen wird (nach dem anfänglichen Laden als leer, da die Daten von einem Ajax-Aufruf weiter stromaufwärts kommen).

Die Komponente in der ForEach-Schleife scheint jedoch nicht zu laden, es gibt keine Anzeige und eine console.log() am oberen Rand der Rendermethode scheint nicht zu feuern.

Ich bin sehr neu zu reagieren, so kann etwas offensichtliches fehlen, aber kann mir jemand sagen, was ich falsch mache?

Answer 1

Anstatt forEach zu verwenden, müssen Sie map verwenden.

Die Methode forEach ist so konzipiert, dass sie Nebenwirkungen hat und daher keinen Wert zurückgibt (oder vielmehr). Sehen Sie sich das JSX-Literal an, nachdem die forEach ausgewertet wurde.

return (
    <div> 
    {undefined} 
    </div> 
) 

Verwenden Sie stattdessen map und die untergeordneten Komponenten zurück.

return (
    <div> 
    {this.props.items.map(function(item) { 
     console.log(item); // Fires correctly 
     return <ItemListing item={item} />; 
    })} 
    </div> 
) 

Nach Auswertung würde die JSX wörtlichen wie folgt aussehen (je nachdem, wie viele Elemente in this.props.items):

return (
    <div> 
    {[ 
     <ItemListing item={this.props.items[0]} />, 
     <ItemListing item={this.props.items[1]} />, 
     // ... 
     <ItemListing item={this.props.items[n]} />, 
    ]} 
    </div> 
)