React Context 从购物车中删除项目

Question

I am doing a React JS Cart and I am having problems when I try to delete an Item from the there. It has already a function that adds the items and also another for the total quantity and the total price. This is the 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>
    </>);
};

If it is necessary I can add to the post the Cart.js or the ItemDetail.js. I hope someone can help me. Cheers

Answer 1

I think you can just use filter given that your state has value of an array. Something like:

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

You can check more array functions from here https://www.w3schools.com/jsref/jsref_obj_array.asp