React JS调用API执行删除操作如何获取数据id？data._id失效无法获取API id

首先你的现有代码存在3个可直接修复的问题：

• 请求URL存在多余括号，会导致请求地址错误，无法匹配后端接口
• 异步逻辑混用await和.then，容易出现时序问题
• 未做错误捕获，无法定位是ID取值错误还是请求本身失败

修正后的代码示例 #

const deleteHandler = async () => {
  try {
    // 修正请求URL，移除多余的括号，改用模板字符串拼接更清晰
    await axios.delete(`http://localhost:5000/users/${editId}`)
    // 此处如果后端返回的主键字段不是_id，替换为对应字段名即可，比如id、userId
    const remainingUsers = data.filter((obj) => obj._id !== editId)
    setData(remainingUsers)
    setEditId('')
    // 按需调用全量列表刷新接口
    handleGet()
  } catch (err) {
    console.error('删除操作失败', err)
  }
}

ID取值异常排查步骤 #

如果修改后还是无法正常删除，按以下步骤确认ID字段：

1. 打开浏览器开发者工具的Network面板，找到获取用户列表的接口响应，查看返回数据中每条用户记录的主键字段名：
   • 若字段名为id，将过滤逻辑中的obj._id改为obj.id
   • 若为其他自定义命名，对应修改即可
2. 检查editId的赋值逻辑，确认赋值时取的是和上述字段名一致的值，同时注意类型匹配：比如如果ID是数字类型，要避免赋值为字符串导致全等判断失效
3. 查看删除请求的实际请求地址，确认URL中拼接的editId和要删除的用户ID完全一致

内容的提问来源于stack exchange，提问作者Rohan Wagh