我是React和学习环境中的新手。在学习过程中，我遇到了一个创建购物车的项目，其中添加和删除值。添加项目部分已经实现，但我无法实现删除功能。
这是我的Item组件，我在这里处理项目数组并添加它们

import { CartContext } from "./Cart-Context";
import { useContext } from "react";
// import { v4 as uuidv4 } from 'uuid';
import React from "react";

const Items = () => {
  const ItemArr = [
    { name: "item1" },
    { name: "item2" },
    { name: "item3" },
    { name: "item4" },
    { name: "item5" },
  ];
  const context = useContext(CartContext);

  const handleClick = (item) => {
    context.updateCart([...context.cart, item]);
   console.log(context.cart);
  };
  const handleRemove = (item) =>{
  const newList = context.cart.filter((newItem, key)=>{
    return newItem !== key
  })
  console.log(newList);
  }

  return (
    <div>
      {ItemArr.map((item) => {
        return (
          <div>
            {item.name}
            <button
              onClick={()=>{handleClick(item)}}
            >
              Add To Cart
            </button>
            <button onClick={()=>{handleRemove(item)}}>Remove from Cart</button>
          </div>
        );
      })}
    </div>
  );
};

export default Items;

这是我的提供程序组件

import { useState } from "react";
import { CartContext } from "./Cart-Context";


const CartProvider = (props) =>{
    const [cart, setCart] = useState([]);
    const [removeCart, setRemoveCart] = useState([])

    return (
    <CartContext.Provider value={{cart: cart ,updateCart: setCart, remove: removeCart , updateRemove: setRemoveCart}}>
            {
                props.children
            }
    </CartContext.Provider>
    );
}

export default CartProvider;

现在，单击删除按钮，我想从购物车数组（context.cart）中删除该特定项目