Reactjs i'；我使用上下文挂钩来添加项目，但我无法删除项目，并卡在这里和don'；我不知道如何解决这个问题

这里是我定义删除功能的产品组件

我无法从产品列表中删除项目。我需要帮助来解决这个问题。 请帮我做这个。多谢各位

    import React, { useContext } from "react";
    import { ContextProduct } from "./ContextProduct";
    
    function Product({ name, price }) {
      const [items, setItems] = useContext(ContextProduct);
      const removeProduct = (id) => {
        setItems(items.filter((item) => item.id !== id));
      };
      return (
        <div>
          <h3>{name}</h3>
          <p>{price}</p>
          <button onClick={() => removeProduct()}> delete</button>
        </div>
      );
    }
    
    export default Product;

从“React”导入React，{useContext}；
从“/ContextProduct”导入{ContextProduct}；
函数产品（{name，price}）{
const[items，setItems]=useContext（ContextProduct）；
常量removeProduct=（id）=>{
setItems（items.filter（（item）=>item.id！==id））；
};
返回(
{name}
{price}

removeProduct（）}>删除
);
}
导出默认产品；

这里是contextProvider

     import React, { createContext, useState } from "react";
    
    export const ContextProduct = createContext();
    
    const ProductProvider = (props) => {
      const [items, setItems] = useState([
        {
          name: "redmi note 9",
          price: "15000",
    
          id: 123,
        },
      ]);
      return (
        <ContextProduct.Provider value={[items, setItems]}>
          {props.children}
        </ContextProduct.Provider>
      );
    };
    
    export default ProductProvider;

从“React”导入React，{createContext，useState}；
export const ContextProduct=createContext（）；
const ProductProvider=（道具）=>{
const[items，setItems]=useState([
{
名称：“redmi注释9”，
价格：“15000”，
id:123，
},
]);
返回(
{props.children}
);
};
导出默认产品提供者；

在此处输入代码`并在此处输入产品列表

    import React, { useContext, useState } from "react";
    import { ContextProduct } from "./ContextProduct";
    import Product from "./Product";
    
    function ProductList() {
      const [items, setItems] = useContext(ContextProduct);
    
      return (
        <div>
          {items.map((item) => (
            <Product name={item.name} price={item.price} key={item.id} />
          ))}
        </div>
      );
    }
    
    export default ProductList;

从“React”导入React，{useContext，useState}；
从“/ContextProduct”导入{ContextProduct}；
从“/Product”导入产品；
函数ProductList（）{
const[items，setItems]=useContext（ContextProduct）；
返回(
{items.map（（item）=>(
))}
);
}
导出默认产品列表；

---

请帮助我解决此问题谢谢

您必须将id连同价格和名称一起传递，并且在您的函数中，您应该按照参数的要求传递它

  function Product({ name, price, id }) {
      const [items, setItems] = useContext(ContextProduct);
      const removeProduct = (id) => {
        setItems(items.filter((item) => item.id !== id));
      };
      return (
        <div>
          <h3>{name}</h3>
          <p>{price}</p>
          <button onClick={() => removeProduct(id)}> delete</button>
        </div>
      );
    }

函数产品（{name，price，id}）{
const[items，setItems]=useContext（ContextProduct）；
常量removeProduct=（id）=>{
setItems（items.filter（（item）=>item.id！==id））；
};
返回(
{name}
{price}

removeProduct（id）}>删除
);
}