反应组件彼此不说话

Question

我已经构建了一个基本的restuarant推荐应用程序，它使用YELP按位置进行过滤。api是用response对象响应我的请求的，所有东西都完美地附加到div中，但是我意识到对于我的项目，我需要为数据列表创建一个新的层。以下是我的两个组件现在的相关部分：

显示-建议：

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
    };
};

我不明白为什么nameList、phoneList和ratingList不会打印到dom上。当我在devtools中查看elements选项卡时，我看到的只是一个空的displayrecs。我一直试图通过猜测来改变事情，但这并没有取得什么成果。你们中有人能看到当前代码的明显问题吗？

谢谢

Answer 1

您的建议react组件的呈现功能没有任何返回语句。尝试这样做：

 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>);
   }
 });

还为建议组件添加一个键，如@Vikramaditya建议的那样：

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