React Context 从购物车中删除项目

Question

我正在做一个 React JS 购物车，当我尝试从那里删除一个项目时遇到问题。它已经有一个添加项目的功能，还有一个添加总数量和总价格的功能。这是上下文提供者：

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>
    </>);
};

如果有必要，我可以添加到 post、Cart.js 或 ItemDetail.js。我希望有一个人可以帮助我。干杯

Answer 1

鉴于您的状态具有数组值，我认为您可以只使用过滤器。类似于：

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

您可以从这里查看更多数组函数https://www.w3schools.com/jsref/jsref_obj_array.asp

React Context 从购物车中删除项目

React Context delete item from Cart

javascript

cart

jsx

reactjs