javascript - 如何使用 react.js 计算购物车中产品的总价格
问题描述
我目前正在使用 react.js 和 Laravel 做一个项目。我需要获取购物车中产品的总价。我已经通过添加此代码“{item.aprice*item.quantity}”为每个产品获取了小计(产品价格 * 数量)的输出。现在我需要得到小计的总价。
这是 Cart.js 的代码
import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import HeaderTop from './HeaderTop';
function Cart() {
let user = JSON.parse(localStorage.getItem('user-info'))
const [data, setData] = useState([])
useEffect(async () => {
let result = await fetch("http://localhost:8000/api/getScartList/" + user.cust_id);
result = await result.json();
setData(result)
}, [])
async function deleteOperation(id) {
let result = await fetch("http://localhost:8000/api/scartdelete/" + id, {
method: 'DELETE'
});
result = await result.json();
console.warn(result)
getDataa();
}
async function getDataa() {
let result = await fetch("http://localhost:8000/api/getScartList/" + user.cust_id);
result = await result.json();
setData(result)
}
useEffect(() => {
getDataa();
}, [])
return (
<div>
<HeaderTop />
<section class="cart-section section-b-space">
<div class="container">
<div class="row">
<div class="col-sm-12 table-responsive-xs">
<table class="table cart-table">
<thead>
<tr class="table-head">
<th scope="col">image</th>
<th scope="col">product name</th>
<th scope="col">price</th>
<th scope="col">quantity</th>
<th scope="col">action</th>
<th scope="col">total</th>
</tr>
</thead>
{
data.map((item) =>
<tbody>
<tr>
<td>
<Link to={"diamondPot1/" + item.aproduct_id}><img src={"http://localhost:8000/" + item.file_path} /></Link>
</td>
<td>{item.name}</td>
<td>
<h2>Rs. {item.aprice}/=</h2>
</td>
<td>
<div class="qty-box">
<div class="input-group">
{item.quantity}
</div>
</div>
</td>
<td><a href="#" class="icon"><span onClick={() => deleteOperation(item.aproduct_sc_id)} className="delete "><i class="ti-close"></i></span></a></td>
<td>
<h2 class="td-color">Sub total : RS. {item.aprice*item.quantity}/=</h2>
</td>
</tr>
</tbody>
)}
</table>
<div class="table-responsive-md">
<table class="table cart-table ">
<tfoot>
<tr>
<td>total price :</td>
<td>
<h2> </h2>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
<div class="row cart-buttons">
<div class="col-6"><Link to="/" class="btn btn-solid">continue shopping</Link></div>
<div class="col-6"><Link to="/checkOut" class="btn btn-solid">check out</Link></div>
</div>
</div>
</section>
{/* section end */}
</div>
)
}
export default Cart
谢谢您的帮助!
解决方案
我同意最好的方法是使用reduce方法。
这是通过对数组的每个元素应用定义的函数并累积结果来实现的。
假设您的数据结构如下所示:
const data = [
{
name: "item1",
aprice: 10,
quantity: 2
},
{
name: "item2",
aprice: 10,
quantity: 2
},
{
name: "item3",
aprice: 10,
quantity: 2
},
{
name: "item1",
aprice: 10,
quantity: 4
},
]
您可以使用如下减速器:
const initialValue = 0;
const total = data.reduce((accumulator,current) => accumulator + current.aprice * current.quantity, initialValue)
推荐阅读
- php - CS-Cart如何处理后端的店面索引页面?
- python - 如何在使用 Selenium 中查找元素文本?
- python - 使用 Selenium 从中间事件中捕获 JSON 数据
- ssis - 在 SSIS 2012 中捕获特定任务的运行时状态
- php - PHPMailer如何在foreach循环中添加嵌入图像
- php - Symfony4 序列化程序问题,属性名称异常
- java - 菜单项开/关日夜模式
- google-apps-script - 如何识别谷歌文档元素索引?
- javascript - jQuery DataTable 多行标题
- typescript - 枚举接口的 Swagger 结构