React从API获取数据后删除指定项遇404错误求助

算力阿峰

2026-8-12

问题解决指南

1. 修复404错误

你的DELETE请求出现404是因为URL里的{id}没有被替换成实际的产品ID——模板字符串需要用${变量名}来插入值，而不是直接写{id}。

修改fetch的URL部分：

const deleteProduct = async (id) => {
  try {
    await fetch(
      `https://upayments-studycase-api.herokuapp.com/api/products/${id}`, // 替换{id}为${id}
      { method: "DELETE" }
    );
    // 用函数式更新确保拿到最新状态
    setProdcts(prevProducts => prevProducts.filter((product) => product.id !== id));
  } catch (err) {
    console.error("删除失败:", err);
  }
};

2. 解决点击后所有项消失又重新加载的问题

统一函数命名：你定义的删除函数是deleteProduct，但点击事件里调用的是onDelete，这会导致函数未定义引发异常。把点击事件改成onClick={() => deleteProduct(product.id)}。
使用函数式更新状态：直接用products.filter依赖的是当前渲染时的旧状态，用prevProducts（React提供的前一次状态）能确保删除逻辑基于最新数据，避免状态不同步。
避免意外页面刷新：如果删除图标包裹在<form>标签里，点击会触发表单默认提交行为导致页面刷新，可在点击事件里添加阻止默认行为的代码：
```
<FaTimes
  onClick={(e) => {
    e.preventDefault();
    deleteProduct(product.id);
  }}
/>
```