反應的組分不相互交談

我已經建立了一個基本的酒樓推薦的應用程序，通過使用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 
    }; 
};

我想不通爲什麼名稱列表，PHONELIST和ratingList不會打印到dom上。當我在devtools元素來查看選項卡上，我看到的是一個空displayrecs股利。我試圖通過猜測來改變事情，但這並不是富有成效的。你們中的任何人都可以看到當前代碼存在明顯的問題嗎？

感謝

來源

2016-11-18 Colin Aulds

試分配密鑰給每個<建議/>這樣組分：'recsLoop.push（<建議鍵= {I}項= {this.props.recommendations [I]} />）'和從呈現建議在組分函數返回。 – Vikramaditya

@Vikramaditya，有趣的是，做你什麼建議後，問題不就解決了，但是，我不再讓控制檯的警告有關與自己的密鑰，這是有道理的分配每個孩子。 –

你的建議反應組件的渲染功能沒有任何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建議：

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

來源

2016-11-18 09:03:00 cdaiga

嗯，就是這樣。非常感謝。我現在覺得很愚蠢。 =） –

有些時候，我們都犯這樣的錯誤。繼續黑客攻擊！ – cdaiga

反應的組分不相互交談

回答

相關問題