反応している成分が互いに反応しない

Question

私は、YELP APIを使用して場所によってフィルターをかける基本的な手洗い推奨アプリケーションを構築しました。 APIはレスポンスオブジェクトのリクエストに応答していましたが、すべてが私のdivに完全に追加されていましたが、私のプロジェクトではデータリストの新しいレイヤーを作成する必要がありました。

表示-RECS：

var DisplayRecs = React.createClass({ 
    render: function() { 
    var recsLoop = []; 

    if (this.props.recommendations) { 
     for (var i=0; i < this.props.recommendations.length; i++) { 
     recsLoop.push(<Recommendations item={this.props.recommendations[i]} />) 
     } 
    } 
    console.log(this.props.recommendations); 
    return (
     <div className="DisplayRecs"> 
     {recsLoop} 
     </div> 
    ); 
    } 
}); 

var mapStateToProps = function(state, props) { 
    return { 
     recommendations: state.recommendations 
    }; 
}; 

勧告：

var Recommendations = React.createClass({ 
    render: function() { 
    <div id="bizData"> 
     <div id='nameList'>{this.props.item.name}</div> 
     <div id='phoneList'>{this.props.item.phone}</div> 
     <div id='ratingList'>{this.props.item.rating}</div> 
    </div> 
    } 
}); 
var mapStateToProps = function(state, props) { 
    return { 
     recommendations: state.recommendations 
    }; 
}; 

私は、なぜ名前リスト、PhoneListとして、及びratingListを把握することはできません彼らは今あるとしてここでは私の二つの成分の関連する部分であり、 domに印刷されません。私がdevtoolsの要素タブを見ると、私は空のdisplayrecs divしか見ることができません。私は推測で物事を変えようとしましたが、それは実り多いものではありません。あなたの誰かが現在のコードに明らかな問題を見ることができますか？

おかげ

Answer 1

あなたの勧告は、コンポーネントのレンダリング機能を反応させるには、任意のreturn文を持っていません。これをやってみてください@Vikramadityaが推奨するよう

var Recommendations = React.createClass({ 
    render: function() { 
    return (<div id="bizData"> 
       <div id='nameList'>{this.props.item.name}</div> 
       <div id='phoneList'>{this.props.item.phone}</div> 
       <div id='ratingList'>{this.props.item.rating}</div> 
       </div>); 
    } 
}); 

また勧告コンポーネントにキーを追加します： `recsLoop.push（<推奨：

recsLoop.push(<Recommendations key={i} item={this.props.recommendations[i]} />)