计算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将是您的购物车总数