我正在使用上下文钩子来添加项目，但我无法删除项目并卡在这里，不知道如何解决

Question

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

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

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;

这里是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;

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

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;

请帮我解决这个问题，谢谢

Answer 1

您必须将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>
);
}