javascript - 如何使用函数和文本映射 ReactJs

Question

我想解释一下我今天遇到的问题。

目前我的 map ，一切正常

我的问题，我希望我可以在其中创建一个 div 以显示总计的结果，不幸的是我不能

您知道如何解决这个问题吗？

 {this.props.items.map(item => { 
 const product = this.props.items;
 let total = 0;

 console.log(total)
 console.log('yolo',product)
 console.log('yolo array',product[0].quantity)

for (let i = 0 ; i<product.length;i++){
console.log('products',product[i].quantity) 
total = total + product[i].quantity;                        
}
} 
)}

Answer 1

即使您要使用 Total 来渲染某些内容，使用此方法您也会为 props.items 中的每个 item 渲染一个“total item”。这里要使用的是reduce方法。这是一个非常基本的 div 示例，但您可以决定用什么来代替它

<div>
{this.props.items.reduce((total,item) => item.quantity + total, 0)}
</div>

reduce 方法的作用是从元素列表中返回单个值。第二个参数是你的初始值，而第一个参数是每次迭代时执行的回调