从 localStorage 中的数组计算总数

Question

我正在使用 React 和 globalContext 将项目添加到购物车页面，这会将产品添加到存储在 localStorage 中的数组中，如下所示。

basket,…]
0: {id: "9", title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band",…}
id: "9"
price: 249.99
quantity: 1
src: "/static/media/se.0ca02982636517aed223.png"
title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band"

关键是购物篮，我可以映射购物车页面中的数据，但我如何计算该数组中的项目总数？

import { GlobalContext } from '../context/GlobalState'

export const Basket = () => {

    const { basket } = useContext(GlobalContext)

    return (
        <div className="h-screen bg-zinc-100 p-4">
            <div className="py-5">
                <div className="max-w-md mx-auto bg-white shadow-lg rounded-lg md:max-w-7xl">
                    <div className="md:flex">
                        <div className="w-full p-4">
                            <div className="md:grid md:grid-cols-3 gap-2 ">
                                <div className="col-span-2 p2 md:p-5">
                                    <h1 className="text-xl font-bold ">Shopping Basket</h1>
                                    <div className="flex justify-between flex-col items-center mt-6 pt-6 gap-12">
                                        {basket.length > 0 ? (
                                            <>
                                                {basket.map(item => (
                                                    <>
                                                        <div className='flex flex-col w-full justify-between md:gap-44 items-start'>
                                                            <div className="flex items-center">
                                                                <img src={item.src} className="rounded w-20 " />
                                                                <div className="flex flex-col ml-3 gap-1 ">
                                                                    <span className="md:text-lg text-sm font-bold w-full md:t-width ">{item.title}</span>
                                                                    <span className="text-xl font-bold">£ {item.price}</span>
                                                                </div>
                                                            </div>
                                                        </div>

                                                    </>
                                                ))}
                                            </>
                                        ) : (
                                            <div>No Items</div>
                                        )}

                                    </div>

                                    <div className="flex justify-between items-center mt-6 pt-6 border-t">
                                        <div className="flex items-center"> <i className="fa fa-arrow-left text-sm pr-2">
                                        </i> <span className="text-md font-medium text-amz hover:text-orange-500 cursor-pointer "> <FontAwesomeIcon icon={faChevronLeft}></FontAwesomeIcon> Continue Shopping</span>
                                        </div>
                                        <div className="flex justify-center items-end">
                                            <span className="text-sm font-medium text-gray-400 mr-1">Total:</span>
                                            <span className="text-lg font-bold text-gray-800 ">Total}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}

Answer 1

您只需遍历本地存储中的数组并计算总数。

let cartArray = localStorage.getItem("basket");
/* since cartArray returns a stringified array you need to parse it */

cartArray = JSON.parse(cartArray);

/* you now have an array of objects. You'd now want to use the reduce function on the object */

const total = cartArray.reduce((prev, cur) => (cur.price * cur.quantity) + prev, 0);

total 是您的购物车总数

从 localStorage 中的数组计算总数

Calculate total from array in localStorage

javascript

arrays

reactjs

react-hooks

local-storage