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方法有效，因为可以在一次迭代中将两个元素推送到rows，而在使用map()返回时，这是不可能的，因为您只能返回一个在单次迭代中要推送的元素。

React array.map（）

2 个答案: