React中DELETE操作数值型ID失效，字符串ID正常的问题排查

• JSON Server的严格类型匹配机制：你使用的localhost:3500大概率是JSON Server，它默认开启严格模式，会用===（严格相等）匹配URL参数与数据中的id。当URL里的1是字符串类型，而数据里的id是数值类型时，1（数值）=== "1"（字符串）结果为false，导致无法找到对应条目，DELETE操作失效。
• 重复ID的规范问题：示例数据中存在两个id:1的条目，违反了主键唯一性要求，即使类型匹配，JSON Server也可能无法正确处理多重复ID的删除请求。

方案1：关闭JSON Server严格匹配模式 #

启动JSON Server时添加--no-strict参数，切换为宽松匹配模式（使用==比较），这样数值ID和字符串形式的URL参数会被视为相等：

json-server --watch db.json --port 3500 --no-strict

方案2：统一ID类型并保证唯一性 #

将数据中的id改为字符串类型，同时确保每个条目ID唯一：

{
  "items": [
    {
      "id": "1",
      "checked": false,
      "item": "biscut"
    },
    {
      "id": "2",
      "checked": false,
      "item": "bread"
    }
  ]
}

这种方式能让URL中的字符串参数与数据ID严格匹配，同时避免重复ID引发的异常。

方案3：优化前端删除逻辑 #

确保前端传递的ID类型与后端一致，同时增加失败回滚逻辑：

const handleDelete = async (id) => {
  const originalItems = [...items];
  // 先更新前端列表
  const updatedItems = items.filter(item => item.id !== id);
  setItems(updatedItems);

  try {
    const reqUrl = `${api_url}/${id}`;
    await fetch(reqUrl, { method: 'DELETE' });
  } catch (err) {
    setFetchError(err.message);
    // 删除失败时恢复原列表
    setItems(originalItems);
  }
};

内容的提问来源于stack exchange，提问作者AI Nobin