Question

我已经构建了一个基本的餐厅推荐应用，可以使用YELP api按位置进行过滤。 api用响应对象响应我的请求，一切都完美地附加到我的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中查看元素选项卡时，我看到的只是一个空的displayrecs div。我试图通过猜测来改变一切，但它并没有取得丰硕成果。您是否可以看到当前代码存在明显问题？

由于

Answer 1

您的Recommendations反应组件的渲染功能没有任何return语句。试着这样做：

 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建议的那样为Recommendations组件添加密钥：

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

反应组件不互相交谈

1 个答案: