javascript - 如何使用 react.js 计算购物车中产品的总价

Question

我目前正在使用 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

感谢您的帮助!

Answer 1

我同意最好的方法是使用 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
  },
]

您可以像下面这样使用 reducer :

const initialValue = 0;
const total = data.reduce((accumulator,current) => accumulator + current.aprice * current.quantity, initialValue)