서로 반응하지 않는 구성 요소를 반응하십시오.

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 문이 없습니다. `recsLoop.push (<권장 사항 : 각 <추천 />과 같은 구성 요소에

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