ES6: .reduce 函数

Question

我正在尝试对 Array 中对象的值求和。这是我的数组：

"seasons":[
  {
    "id": "1",
    "name": "Season 1"
    "stocks":[
        {
          "size": "s",
          "stock": "5"
        },
        {
          "size": "m",
          "stock": "5"
        },
        {
          "size": "l",
          "stock": "5"
        }
     ]
   }
], ...

这里是我要实现的地方

      <tbody>
            {seasons.length ? 
              seasons.map(seasons => (
                <React.Fragment>
                    {seasons.items.length ? 
                        seasons.items.map(season=> (
                            <tr onClick={()=>this.handleClick(season.id)}>
                              <td>{season.stocks.reduce((stock)=>stock, 0)}
                            </tr>
                            ))
                        :
                        <React.Fragment/>
                    }
                </React.Fragment>
              ))
              : 
              <React.Fragment/>
            }
     </tbody>

我知道 .reduce 至少需要 2 个参数，但我想不出任何方法来做到这一点。我先尝试映射它

{season.stocks.length ? season.stock.map(stock=>(
  stock.reduce()
)):<div/>}

当然它失败了，因为一旦我映射它，它就不再是一个数组。无论如何我可以将 "stock" 的总和加起来吗？谢谢！

Answer 1

您的 reduce 函数缺少一个累加器值（它包含 "reduced" 值，即您正在谈论的第二个值）。

给您一个更简单的 reduce 示例，以便您了解累加器的作用：

const totalOfArray = [1, 2, 3, 4, 5].reduce((total, value) => total += value, 0); //1 + 2 + 3 + 4 + 5 = 15

累加器值存储在变量total中。 reduce 遍历数组和每个循环，value 被添加到 total.

现在我们可以将其转化为您的用例，即获取总库存价值。我想你想在这里做什么

<td>
    { season.stock.reduce((totalStock, stockItem) => totalStock += parseInt(stockItem.stock), 0) }
</td>

请注意 parseInt，在您的数据数组中，stock 是一个字符串而不是数字。如果你减少一个字符串，你最终会得到一个连接的字符串而不是总库存数。我们可以通过运行在我们的浏览器控制台中进行一个简单的测试来证明这一点：

const totalOfArray = ['1', '2', '3', '4', '5'].reduce((total, value) => total += value, ''); //12345

这就是为什么您必须执行 parseInt。

查看 documentation on Array#reduce here

ES6: .reduce 函数

ES6: .reduce function

reduce

jsx

reactjs

es6-modules