React+Redux Toolkit+JSON-Server待办列表删除404错误求助

使用React、Redux Toolkit和JSON-Server搭建的简易待办事项列表，新增、获取待办项功能正常，但执行删除操作时出现404错误。直接访问http://localhost:5000/todos可正常查看db.json中的数据，但访问http://localhost:5000/todos/[id]时提示资源未找到。

相关代码片段：

• 删除按钮组件：

<button
className="btn btn-danger"
onClick={() => dispatch(deleteAsyncTodos({ id }))}
>
delete
</button>

• Axios基础URL配置：

const api = axios.create({
    baseURL: "http://localhost:5000",
});

• 删除待办项的异步Thunk：

export const deleteAsyncTodos = createAsyncThunk(
"todos/deleteAsyncTodos",
async (payload, { rejectWithValue }) => {
try {
await api.delete(`/todos/${payload.id}`);
return { id: payload.id };
} catch (error) {
return rejectWithValue(error.message);
}
}
);

• extraReducer中的UI更新逻辑：

const todoSlice = createSlice({
name: "todos",
initialState: {
todos: [],
loading: false,
error: "",
},
extraReducers: (builder) => {
builder
.addCase(deleteAsyncTodos.fulfilled, (state, action) => {
state.todos = state.todos.filter(
(todo) => todo.id !== Number(action.payload.id)
);
})
});

1. 确认ID类型匹配 #

JSON-Server的动态路由要求请求URL中的ID必须与db.json中todos项的id字段类型完全一致：

• 若db.json中id为字符串类型（如"id": "1"），则请求URL需传递字符串类型的ID；
• 若db.json中id为数字类型（如"id": 1），则前端需传递数字类型的ID。

2. 检查ID传递正确性 #

在异步Thunk中添加日志，确认删除时传递的ID值是否正确：

export const deleteAsyncTodos = createAsyncThunk(
"todos/deleteAsyncTodos",
async (payload, { rejectWithValue }) => {
console.log("待删除ID:", payload.id); // 新增日志打印
try {
await api.delete(`/todos/${payload.id}`);
return { id: payload.id };
} catch (error) {
return rejectWithValue(error.message);
}
}
);

若日志显示ID为undefined或错误值，需检查删除按钮所在组件中id变量的获取逻辑是否正确。

3. 统一ID类型转换 #

若存在ID类型不匹配的情况，在请求前统一转换类型：

• 若db.json中id为字符串，修改Thunk中的URL拼接：

await api.delete(`/todos/${String(payload.id)}`);

• 若db.json中id为数字，修改为：

await api.delete(`/todos/${Number(payload.id)}`);

4. 验证JSON-Server路由可用性 #

手动通过curl或Postman发送删除请求，验证路由是否正常：

curl -X DELETE http://localhost:5000/todos/[实际存在的ID]

若该请求也返回404，说明问题出在JSON-Server配置或db.json数据本身（如无对应ID的待办项、字段名错误等）；若请求成功，则排查前端代码中ID传递或类型转换的问题。

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