无法从购物车中删除项目

Question

我想用上下文API从购物车中删除商品。我想一个接一个地删除项目。例如，一个产品有五个计数，我想说，如果有多个产品一个接一个地减去，否则(只有一个(删除整个产品

项目数据来自JSON文件

首先我用了这个代码

import { createContext, useState } from "react";
const CartContext = createContext();
export function CartProvider({ children }) {
const [items , setItems] = useState([]);
const AddToCart = (photo,price,title,des,id,count)=>{
const product = items.find(item=> item.id === id);
if (product) {
product.count+=1  ;
const products = items.find(item=> item.id !== id);
items.count =1; 
return[...products, product]
}
setItems((prevState) => [...prevState, {photo,price,title,des,id,count}]);
}
const DeleteItemCart = (id) => {
const product = items.find(item=> item.id === id);
if(product.count>1){
product.count -=1;
}
else{
const deleted = items.filter((product) => parseInt(product.id) !== parseInt(id));
setItems(deleted);}
};
return <CartContext.Provider value={{items,AddToCart,DeleteItemCart}}>
{children}
</CartContext.Provider>;
}
export default CartContext;

在console.log中，一切正常，项目数量一个接一个地减少。但它在页面中不起作用，项目编号是固定的。

我想最好把计数放在一个状态下，所以我写了这个代码

const product = items.find(item=> item.id === id);
const[counter, setCounter] = useState(product.count)
const DeleteItemCart = (id) => {
if(counter>1){
const prev =product.count
setCounter(prev => prev-1)
console.log(counter)
}

else{
const deleted = items.filter((product) => product.id !== id);
setItems(deleted);}
};

但仍有错误

Answer 1

尝试将您的数据转换为ID的整数。

例如：-试试这个方法

const DeleteItemCart = (id) => {
const newTemp = [...items];
const product = newTemp.find(item=> parseInt(item.id) === parseInt(id));
if(product.count>1){
product.count -=1;
setItems(newTemp);// you missed this after reducing to 1
}
else{
const deleted = items.filter((product) => parseInt(product.id) !== parseInt(id));
setItems(deleted);}
};