ES6: функция снижения

Question

Я пытаюсь суммировать значение объекта в массиве. Вот мой массив:

"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, чтобы вы могли понять, что делает аккумулятор:

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.

Ознакомьтесь с документацией по массиву # уменьшите здесь