Reactは子をレンダリングせずコンソールログを正しく返します

Question

ブロックのリストをページコンポーネントの子としてレンダリングしようとしています。これまでのところ、私はブロックのconsole.logを見ているだけです。コンソールでデータが正常であっても、ブロックはレンダリングされません。

私はあなたがmap代わりのforEachを使用する必要があり、間違った

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

何をやっています。

アレイ上のforEachを呼び出すと、undefinedが返されます。 Page要素の子要素として、undefinedではなくBlock要素の配列を渡したいとします。

また、あなたはそうあなたがundefinedの配列になってしまいます、あなたのBlock要素をreturn必要があります。

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