React页面删除预约记录时提示‘Method not allowed’问题排查

问题根源分析 #

你的代码里有几个明显的问题导致了这个错误，而Insomnia能正常调用是因为它默认遵循了HTTP规范：

1. HTTP请求方法大小写不规范
   HTTP协议中，请求方法必须是大写（比如DELETE），但你的代码里写的是"Delete"。部分后端服务器对方法的大小写敏感，会把非大写的方法判定为不允许的请求类型，直接返回405错误。

2. 事件目标ID获取存在隐患
   依赖e.target.id获取预约ID并不稳妥——如果按钮内后续添加了图标、span等子元素，点击时e.target会指向子元素而非按钮，导致获取的ID为空或错误，进而请求错误的URL，也可能触发方法不允许的错误。

3. 未处理请求失败的情况
   原代码不管接口是否调用成功，都会直接更新本地状态，这会导致服务器删除失败时，本地列表和后端数据不一致。

具体修复代码 #

步骤1：修正HTTP请求方法 #

把fetch配置里的method改为大写的"DELETE"：

const fetchConfigs = {
  method: "DELETE", // 改为大写
  headers: {
    "Content-Type": "application/json"
  }
}

步骤2：直接传递预约ID到删除函数 #

修改按钮的点击事件，直接把预约ID作为参数传入，避免依赖事件目标：

// 渲染按钮的部分
<td>
  <button onClick={() => handleDelete(appointment.id)} className="btn btn-primary" style={{backgroundColor:"red", border: '1px solid red'}}>Cancel</button>
  <button onClick={() => handleDelete(appointment.id)} className="btn btn-primary" style={{backgroundColor:"green", border: '1px solid green'}}>Finish</button>
</td>

同时更新handleDelete函数，直接接收ID参数：

const handleDelete = async (appointmentId) => {
  const url = `http://localhost:8080/api/services/${appointmentId}`

  const fetchConfigs = {
    method: "DELETE",
    headers: {
      "Content-Type": "application/json"
    }
  }

  const resp = await fetch(url, fetchConfigs)
  // 仅当请求成功时更新本地状态
  if (resp.ok) {
    setAppointments(appointments.filter(appointment => String(appointment.id) !== String(appointmentId)))
  } else {
    // 可选：添加错误提示或日志
    const errorInfo = await resp.json()
    console.error("删除失败:", errorInfo)
    alert("删除预约失败，请稍后重试")
  }
}

步骤3：优化状态更新（可选） #

为了避免闭包导致的状态更新问题，可以使用函数式更新：

setAppointments(prevAppointments => prevAppointments.filter(appointment => String(appointment.id) !== String(appointmentId)))

这样能确保每次更新都基于最新的状态，而不是组件渲染时捕获的旧状态。

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