我的Delete API帶有 JSON 格式的http://localhost:8080/api/inventory/deleteproduct請求正文：
{
"upc": "100101101111"
}
upc是每個產品的唯一值。
這是我從 API 獲取資料的代碼：
export function Inventory() {
const [product, setProduct] = useState(null);
useEffect(() => {
axios
.get("http://localhost:8080/api/inventory/products")
.then((response) => {
setProduct(response.data);
});
}, [url]);
if (product) {
return (
<div>
<h1>Inventory</h1>
<table className="table">
<thead>
<tr>
<th scope="col">Product Name</th>
<th scope="col">Brand</th>
<th scope="col">Category</th>
<th scope="col">Product Description</th>
<th scope="col">Price Per Unit</th>
<th scope="col">Available Stock</th>
<th scope="col">Reserved Stock</th>
<th scope="col">Shipped Stock</th>
<th scope="col">Image</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{product.map((item) => (
<tr>
<td>{item.productName}</td>
<td>{item.brand}</td>
<td>{item.category}</td>
<td>{item.productDescription}</td>
<td>{item.pricePerUnit}</td>
<td>{item.availableStock}</td>
<td>{item.reservedStock}</td>
<td>{item.shippedStock}</td>
<td>
<img src={item.imageUrl} height={100} width={100} />
</td>
<td>
<Button>
onClick={() => {
onDeleteProduct();
}}
style={{ color: "red", marginLeft: 12 }}
/Button>
</td>
</tr>
))}
</tbody>
</table>
</div>
);
}
}
我已經完成了 GET 方法的一部分，將 API 中的所有資料提取到表中。
現在我正在研究 DELETE 方法。我還已經在每一行中創建了一個洗掉按鈕。但我不知道如何獲取upc單擊洗掉按鈕呼叫 API 的行中的值http://localhost:8080/api/inventory/deleteproduct。
有人可以給我一些想法嗎？
uj5u.com熱心網友回復：
由于每個專案都有一個唯一的upc，那么你的函式應該接受這個作為引數
<td>
<Button>
onClick={() => {
onDeleteProduct(item.upc);
}}
style={{ color: "red", marginLeft: 12 }}
/Button>
</td>
然后你的方法會變成這樣
onDeleteProduct = itemUpc => {
axios.delete('http://localhost:8080/api/inventory/deleteproduct', { data: { upc: itemUpc }, headers: { } });
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/518142.html
標籤：反应休息
下一篇：Python簡單的延遲加載