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 。