在react中从localStorage更新购物篮页面中的商品数量

Question

我使用react和globalContext将商品添加到购物车页面，这将产品添加到存储在localStorage中的数组中，看起来像这样。

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 { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faChevronLeft, faClose, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons'
import React, {useContext, useEffect, useState} from 'react'
import { NavLink } from 'react-router-dom'
import { GlobalContext } from '../context/GlobalState'
export const Basket = () => {
const {basket, removeFromCart} = useContext(GlobalContext)
let cartArray = localStorage.getItem("basket");
cartArray = JSON.parse(cartArray);
const total = cartArray.reduce((prev, cur) => (cur.price * cur.quantity) + prev, 0);
console.log(total)
const [quantity, setQuantity] = useState(0);
const handleReduceQuantity = () => {
if (quantity === 0) return;
setQuantity((prev) => prev - 1);
};
const handleIncreaseQuantity = () => {
setQuantity((prev) => prev + 1);
};
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 className="flex items-center justify-between py-2 bg-gray-100 rounded-md md:w-36">
<FontAwesomeIcon
icon={ faMinus }
className="ml-4 transform scale-110 cursor-pointer text-primary"
onClick={handleReduceQuantity}
/>
<span className="text-lg font-bold text-secondary-dark">
{item.quantity}
</span>
<FontAwesomeIcon 
icon={ faPlus }
className="mr-4 transform scale-110 cursor-pointer text-black"
onClick={handleIncreaseQuantity}
/>
</div>
<FontAwesomeIcon icon={ faClose }  onClick={() => 
removeFromCart(item.id)}/>
</div>
</div>

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

</div>

<div className="flex justify-between items-center mt-6 pt-6 border-t">
<NavLink to="/">
<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>
</NavLink>
<div className="flex justify-center items-end"> 
<span className="text-sm font-medium text-gray-400 mr-1">Subtotal:</span> 
<span className="text-lg font-bold text-gray-800 ">£ {total}</span> 
</div>
</div>
</div>
<div className=" p-5 bg-gray-800 rounded overflow-visible"> 
<span className="text-xl font-medium text-gray-100 block pb-3">Total</span> 
<div className="flex justify-center flex-col pt-3"> 
<label className="text-xs text-gray-400 ">Name on Card</label> 
<input type="text" className="focus:outline-none w-full h-6 bg-gray-800 text-white placeholder-gray-300 text-sm border-b border-gray-600 py-4" placeholder="Giga Tamarashvili"/> 
</div>
<div className="flex justify-center flex-col pt-3"> 
<label className="text-xs text-gray-400 ">Card Number</label> 
<input type="text" className="focus:outline-none w-full h-6 bg-gray-800 text-white placeholder-gray-300 text-sm border-b border-gray-600 py-4" placeholder="**** **** **** ****"/> 
</div>
<div className="grid grid-cols-3 gap-2 pt-2 mb-3">
<div className="col-span-2 "> 
<label className="text-xs text-gray-400">Expiration Date</label>
<div className="grid grid-cols-2 gap-2"> 
<input type="text" className="focus:outline-none w-full h-6 bg-gray-800 text-white placeholder-gray-300 text-sm border-b border-gray-600 py-4" placeholder="mm"/> 
<input type="text" className="focus:outline-none w-full h-6 bg-gray-800 text-white placeholder-gray-300 text-sm border-b border-gray-600 py-4" placeholder="yyyy"/> 
</div>
</div>
<div className=""> 
<label className="text-xs text-gray-400">CVV</label> <input type="text" className="focus:outline-none w-full h-6 bg-gray-800 text-white placeholder-gray-300 text-sm border-b border-gray-600 py-4" placeholder="XXX"/> 
</div>
</div> 
<button className="h-12 w-full bg-blue-500 rounded focus:outline-none text-white hover:bg-blue-600">Check Out</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
)
}

目前数量选择器只是一个计数器，它不会改变localStorage中商品的数量，因此不会改变总价。

Answer 1

const items = [
{
id: "9",
price: 200,
quantity: 1,
src: "/static/media/se.0ca02982636517aed223.png",
title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band",
},
{
id: "3",
price: 300,
quantity: 1,
src: "/static/media/se.0ca02982636517aed223.png",
title: "Apple Watch SE 40mm (GPS) - Space Grey Aluminium Case with Midnight Sport Band",
}
];
const calculateTotal = (items) => {
const total = items.reduce((acc, curr) => (curr.price * curr.quantity) + acc, 0);
console.log(total);
}
const handleQuantityUpdate = (itemId, operation) => {
const newItems = items.map((i) => {
if(i.id === itemId){
return {...i, quantity: operation === 'increase' ? i.quantity + 1 : i.quantity - 1};
}
return {...i};
});
//need to store into localstorage at this point
console.log(newItems);
calculateTotal(newItems);
}
handleQuantityUpdate("9", 'increase'); 
handleQuantityUpdate("3", "decrease");