反应 array.map()答案

【问题标题】：React array.map()反应 array.map()
【发布时间】：2017-08-08 03:36:01
【问题描述】：

我将使用这个示例 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;      
});

干杯，谢谢，

【问题讨论】：

由于上面的返回，你永远不会到达lastCategory = product.category 行

标签： javascript arrays reactjs mapping

【解决方案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} />); 
});

【讨论】：

除此之外，您可能还想将 'lastCategory' 设置为 var 而不是 'const'，因为在设置了 const 的值后您无法更改它。
好电话！甚至没有看那个。谢谢 - 更新:)
这仍然行不通——使用这个循环，它需要能够在一次迭代中推送一个类别行，然后是一个产品行。在这里，你推送的是一个品类，永远不会推送后面的产品，因为你已经退货了。
注意到另一个答案。已更新
仍然行不通，因为您必须返回一个单独的或父元素，而不是像这样的一对兄弟姐妹。

【解决方案2】：

forEach 方法之所以有效，是因为可以在一次迭代中将两个元素推送到 rows，而使用 map() 返回时这是不可能的，因为在一次迭代中只能返回一个要推送的元素单次迭代。

【讨论】：