Javascript 反应上下文从购物车中删除项目

我正在做一个React JS购物车，当我试图从那里删除一个项目时遇到问题。它已经有了一个功能，可以添加项目，还有一个功能可以添加总数量和总价格。 这是ContextProvider：

import { useState } from "react";
import { CartContext } from "./CartContext";

export const CartProvider = ({ children }) => {
    const [list, setList] = useState([]);    
    const addCart = (varietalCount) => {
        if (list.find((item) => item.id === varietalCount.id)) {
          const newVarietal = list.map((varietal) => {
            if (varietal.id === varietalCount.id) {
              return { ...varietal, count: varietalCount.count + varietal.count };
            }
            return varietal;
          });
          setList(newVarietal);
        } else {
          setList((state) => {
            return [...state, varietalCount];
          });
        }
      };
      console.log("list", list);

  // const deleteProd = (varietalCount) => {
  //   if (list.find((item) => item.id === varietalCount.id)) {
  //     const deleteVarietal = list.map((varietal) => {
  //       if (varietal.id === varietalCount.id) {
  //         return { ...varietal, count: null };
  //       }
  //       return varietal;
  //     });
  //     setList(deleteVarietal);
  //   } else {
  //     setList((state) => {
  //       return [...state, varietalCount];
  //     });
  //   }
  // };
      
      const totalPrice = () => {
        return list.reduce((prev, next) => (prev + (next.count * next.price)), 0)
      };  
      const totalQuantity = () => {
        return list.reduce((prev, next) => (prev + (next.count)), 0)
      };

    return(
    <>
      <CartContext.Provider value={{ list, addCart, totalPrice, totalQuantity }}>
          {children}
      </CartContext.Provider>
    </>);
};

从“react”导入{useState}；
从“/CartContext”导入{CartContext}；
export const CartProvider=（{children}）=>{
const[list，setList]=useState（[]）；
常量addCart=（变量计数）=>{
if（list.find（（item）=>item.id==varietalCount.id））{
const newVarietal=list.map（（varietal）=>{
if（varietal.id==varietalCount.id）{
返回{…varietal，count:varietalCount.count+varietal.count}；
}
回归品种；
});
集合列表（新品种）；
}否则{
设置列表（（状态）=>{
返回[…状态，变量计数]；
});
}
};
控制台日志（“列表”，列表）；
//常量deleteProd=（变量计数）=>{
//if（list.find（（item）=>item.id==varietalCount.id））{
//常量deleteVarietal=list.map（（varietal）=>{
//if（varietal.id==varietalCount.id）{
//返回{…品种，计数：空}；
//       }
//回归品种；
//     });
//设置列表（删除品种）；
//}其他{
//设置列表（（状态）=>{
//返回[…状态，变量计数]；
//     });
//   }
// };
const totalPrice=（）=>{
返回列表.reduce（（上一个，下一个）=>（上一个+（下一个.count*next.price）），0）
};  
常量总数量=（）=>{
返回列表.reduce（（上一个，下一个）=>（上一个+（下一个.count）），0）
};
返回(
{儿童}
);
};

---

如果有必要，我可以在帖子中添加Cart.js或itemdail.js。我希望有人能帮助我。干杯

我认为您可以使用过滤器，因为您的状态具有数组的值。比如：

const deleteProd = (varietalCount) => {
  const newItems = list.filter((item) => item.id !== varietalCount.id)
  setList(newItems);
};

---

您可以从此处检查更多数组函数

您是否试图从列表中删除某个项目（您可以使用array.filter btw）或保留该项目，但将计数设置为null（上面的注释代码）？我想从购物车中删除该项目，我在函数addCart之后执行了函数deleteProd，但没有使用in count“varietalCount.count+varietal.count”我之所以输入null，是因为我想将它从那里删除。显然它不起作用@AlbertThank@albert，但它在函数“TypeError:无法读取未定义的属性“id”的第二行中显示了此错误“，在没有deleteProd函数的情况下，代码运行良好。调用该函数的确切位置是什么？在Cart.js Remove{deleteProd（）}中，我可以看到您没有传递deleteProd函数所需的预期对象。我也不确定如果没有任何事件，它将如何工作。我建议您将其包装在带有onclick事件的按钮中。因此，将其更改为

deleteProd（varietal）}Remove