React array.map（）

Question

我將使用這個例子http://codepen.io/lacker/pen/vXpAgj，因爲它與我目前的問題非常相似。所以，假設我們有這個數組：

[ 
    {category: 'Sporting Goods', price: '$49.99', stocked: true, name: 'Football'}, 
    {category: 'Sporting Goods', price: '$9.99', stocked: true, name: 'Baseball'}, 
    {category: 'Sporting Goods', price: '$29.99', stocked: false, name: 'Basketball'}, 
    {category: 'Electronics', price: '$99.99', stocked: true, name: 'iPod Touch'}, 
    {category: 'Electronics', price: '$399.99', stocked: false, name: 'iPhone 5'}, 
    {category: 'Electronics', price: '$199.99', stocked: true, name: 'Nexus 7'} 
] 

如何使用array.map（）重寫下面的代碼？

var rows = []; 
    var lastCategory = null; 
    this.props.products.forEach(function(product) { 
     if (product.category !== lastCategory) { 
     rows.push(<ProductCategoryRow category={product.category} key={product.category} />); 
     } 
     rows.push(<ProductRow product={product} key={product.name} />); 
     lastCategory = product.category; 
    });  

下面的示例不能正確地完成這項工作。

const lastCategory = null; 
const rows = this.props.products.map(function(product){  
    if (product.category !== lastCategory) {   
    return (<ProductCategoryRow category={product.category} key={product.category} />); 
    }  
return (<ProductRow product={product} key={product.name} />); 
lastCategory = product.category;  
}); 

歡呼和感謝，

Answer 1

你將永遠不會被設置lastCategory因爲你總是在該行之前返回。如果類別與上一個類別不同，請嘗試將它移動到您的塊中。

此外，就像另一個回答說的，當遇到新類別時，除了產品行之外，還需要返回類別行。

var lastCategory = null; 
const rows = this.props.products.map(function(product){  
    if (product.category !== lastCategory) { 
    lastCategory = product.category; 
    return (<ProductCategoryRow category={product.category} key={product.category} /> 
      <ProductRow product={product} key={product.name} />); 
    }  
    return (<ProductRow product={product} key={product.name} />); 
}); 

Answer 2

的forEach方法有效，因爲它可以在一個單一的迭代，其中是不是有可能在與map()返回，因爲你只能返回一個元素一個迭代期間要推推兩個元素到rows 。