前端向后端发送DELETE请求不生效问题排查（Postman测接口正常）

• 后端存储女性历史人物数据集，前端基于React框架实现数据列表展示，当前数据可正常渲染
• 后端在server.js中编写了基于ID的DELETE删除接口，经Postman测试功能正常：传入存在的ID可正确删除对应数据并返回成功响应，传入不存在的ID会返回404状态码
• 前端封装了基于fetch的DELETE请求方法，使用Redux Toolkit的createAsyncThunk编写了删除操作对应的异步thunk，在列表项的删除按钮点击事件中dispatch该异步action，传入当前列表项的ID参数

• 点击删除按钮后功能完全不生效，未正常触发后端删除逻辑，也未返回404错误状态
• 控制台仅能打印出正确的待删除数据ID，无其他明确报错，无法直接定位故障原因

代码存在两处核心错误，导致请求未正常发送到有效接口：

• 参数传递格式全链路不匹配
  1. 按钮点击dispatch时，直接传入数字类型的beauty.id，但deleteBeautyAsync的回调函数期望入参为带id属性的对象，解构后得到的id值为undefined
  2. thunk回调中拿到id值后，直接把数字类型的id传给deleteBeauty方法，但deleteBeauty同样期望入参为带id属性的对象，二次解构后id仍为undefined
     最终请求URL被拼接为http://localhost:5000/beauty/undefined，完全没有命中后端定义的/:id路由规则，自然不会触发后端逻辑也不会返回预期的404响应
• 请求方法未返回Promise实例：封装的deleteBeauty方法中，fetch调用的Promise结果没有return，即使参数正确请求正常发出，外层await也无法拿到接口响应，Redux无法同步更新列表状态

统一全链路参数格式，补全请求方法的return逻辑，可选增加错误捕获和状态同步逻辑：

1. 修正按钮点击事件的dispatch传参，传入符合格式要求的对象
2. 修正thunk中调用请求方法的传参，保持参数格式一致
3. 给封装的fetch请求添加return，保证外层可以拿到响应结果
4. （可选）在slice中补充删除成功的状态处理逻辑，同步更新前端列表
5. （可选）添加请求错误捕获，处理接口报错场景

1. 列表项删除按钮绑定代码 #

<div className='dd'>
  <h1> {beauty.Name}</h1>
  <h1> Spouse: {beauty.Spouse}</h1>
  <h1> Title: {beauty.Title}</h1>
  <h4>ID: {beauty.id}</h4>
  <button
  onClick={()=>{
    // 修正：传入带id属性的对象，和thunk入参格式对齐
    dispatch(deleteBeautyAsync({id: beauty.id}));
    console.log(beauty.id);
  }}>
    Delete Beauty
  </button>
</div>

2. Redux Thunk删除异步逻辑 #

export const deleteBeautyAsync = createAsyncThunk(
  Delete_Beauty,
  async ({id}) => {
    // 修正：传入带id属性的对象，和deleteBeauty方法入参格式对齐
    return await action.deleteBeauty({id});
  }
);

3. 删除请求action封装方法 #

const deleteBeauty = async({id})=>{
  // 修正：return fetch的Promise结果，保证外层await可以拿到响应
  return fetch('http://localhost:5000/beauty/'+id,{
    method:'DELETE'
  }).then(res=>{
    // 补充错误状态抛出，方便外层捕获404等异常
    if(!res.ok) throw new Error(`Delete failed with status: ${res.status}`);
    return res.json();
  });
}

4. （可选）Slice中补充列表更新逻辑 #

const beautySlice = createSlice({
  name: 'beauty',
  initialState: {
    list: [],
    status: 'idle',
    error: null
  },
  reducers: {},
  extraReducers: (builder) => {
    // 处理删除成功逻辑，用后端返回的最新列表替换本地状态
    builder.addCase(deleteBeautyAsync.fulfilled, (state, action) => {
      state.list = action.payload.BeautyData;
      state.status = 'idle';
    })
    // 可选：处理删除失败逻辑
    .addCase(deleteBeautyAsync.rejected, (state, action) => {
      state.status = 'error';
      state.error = action.error.message;
    })
  }
})

修复后点击删除按钮，请求会正确发送到对应ID的接口地址，后端执行删除逻辑后返回最新数据，前端Redux状态同步更新，页面会自动移除被删除的列表项。

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