ES6: функция .reduce
Я пытаюсь суммировать значение объекта внутри массива. Вот мой массив:
"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/>}
и, конечно, это терпит неудачу, потому что как только я сопоставил его, это больше не массив. Могу ли я в любом случае суммировать стоимость всего «запаса»? Спасибо!
Ответы 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.
Проверьте документация по Array#reduce здесь