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/>}

当然会失败，因为一旦我映射了它，它就不再是数组。无论如何，我可以将“库存”的总和求和吗？谢谢！

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函数

1 个答案: