React rendert keine untergeordneten Elemente, aber Konsolenprotokolle korrekt

Question

Ich versuche, eine Liste von Blöcken als untergeordnete Elemente meiner Page-Komponente zu rendern. Bis jetzt sehe ich nur die console.log von Blöcken erscheinen. Die Blöcke werden überhaupt nicht gerendert, selbst wenn die Daten in der Konsole in Ordnung sind.

Was bin ich falsch

var Block = React.createClass({ 
    render: function() { 
    var block = this.props.item; 
    return (
     <div className="row" key={block.id}> 
      <p>{block.name}</p> 
     </div> 
    ); 
    } 
}); 

var Page = React.createClass({ 
    getInitialState: function() { 
    return { 
     page: '', 
     blocks: [], 
     newBlockValue: '' 
    }; 
    }, 

    componentDidMount: function() { 
    this.serverRequest = $.get("/pages/"+this.props.page+".json", function (result) { 
     this.setState({ 
      page: result.page, 
      blocks: result.blocks 
     }); 
    }.bind(this)); 
    }, 

    componentWillUnmount: function() { 
    this.serverRequest.abort(); 
    }, 

    render: function() { 
    var page = this.state.page; 
    return (
     <div className="row"> 
      {this.state.blocks.forEach(function(block){ 
       console.log(block); 
       <Block key={block.id} item={block} /> 
      })} 
      <form id="add_new_block"> 
       <input type="text" id="new_block" value={this.state.newBlockValue} onChange={this.handleChange} autoComplete="off"/> 
       <input type="submit" value='Save' onClick={this.createBlock}/> 
      </form> 
     </div> 
    ); 
} 

Answer 1

tun sollten Sie map anstelle von forEach.

Aufruf forEach auf einem Array gibt undefined zurück. Sie möchten Ihrem Element Page ein Array von Block Elementen als Kind geben, nicht undefined.

Auch sollten Sie Ihr Block Element return, sonst werden Sie mit einer Reihe von undefined am Ende:

this.state.blocks.map(function(block){ 
    return <Block key={block.id} item={block} /> 
})