MERN CRUD应用编辑text字段的PATCH请求异常变为GET请求

在集成JWT认证的MERN栈CRUD应用中，修改MongoDB文档text字段的PATCH请求出现异常，同模块下修改status布尔字段的PATCH请求运行完全正常：

• 正常status请求：携带todoId、空对象与鉴权头发起，请求地址为http://localhost:3000/api/todos/62bae4bdda66c364463c58d0，无报错。
• 异常text请求：逻辑与正常请求基本一致，仅URL追加/edit路径、携带非空请求体，预期地址为http://localhost:3000/api/todos/62bae4bdda66c364463c58d0/edit，但浏览器Network面板显示实际发起的是向http://localhost:3000/api/todos/的GET请求，返回304 OK状态码；该接口在Postman中测试可正常响应。

两类请求的全链路代码如下，各文件上方为正常的status修改逻辑，下方为异常的text修改逻辑：

前端代码 #

TodoCard.js（派发action） #

editedTodo为字符串类型，{editedTodo}是包含editedTodo键的对象

// status修改（正常）
const handleStatusUpdate = () => {
  dispatch(updateStatus(todo._id))
}

// text修改（异常）
const handleEdit = () => {
  dispatch(editTodo(todo._id, {editedTodo}))
}

TodoSlice.js（异步thunk逻辑） #

// status修改（正常）
return await todoService.updateStatus(id, token)

// text修改（异常）
return await todoService.editTodo(id, editedTodo, token)

TodoService.js（Axios请求定义） #

// status修改（正常）
const response = await axios.patch(API_URL + todoId, {}, config)

// text修改（异常）
const response = await axios.patch(API_URL + todoId + '/edit', editedTodo, config)

后端代码 #

todoRoutes.js（路由定义） #

protect为JWT鉴权中间件

// status修改路由
router.patch('/:id', protect, updateStatus)

// text修改路由
router.patch('/:id/edit', protect, editTodo)

todoController.js（控制器逻辑） #

// status修改控制器
const updatedTodo = await Todo.findByIdAndUpdate(req.params.id, { status: !todo.status }, { new: true })

// text修改控制器
const editedTodo = await Todo.findByIdAndUpdate(req.params.id, { text: req.body.editedTodo }, { new: true })

两个核心问题导致异常：

1. Redux Toolkit 传参语法错误
   createAsyncThunk生成的action creator仅支持传入单个参数，payload creator的固定签名为async (arg, thunkAPI)，仅接收两个参数。
   当前dispatch(editTodo(todo._id, {editedTodo}))传入了两个参数，第二个参数会被直接丢弃；如果thunk定义时写了类似async (id, editedTodo, thunkAPI)的三参结构，第二个参数实际拿到的是thunkAPI对象，而非传入的文本内容，会导致请求参数、请求头、Token读取全链路异常。
   修复方式：多参数统一包裹为对象传入

// TodoCard.js 修复dispatch传参
const handleEdit = () => {
  dispatch(editTodo({ todoId: todo._id, editedTodo }))
}

// TodoSlice.js 修复thunk入参
export const editTodo = createAsyncThunk('todos/edit', async (arg, thunkAPI) => {
  try {
    const { todoId, editedTodo } = arg
    const token = thunkAPI.getState().auth.user.token // 按原有逻辑从thunkAPI取token
    return await todoService.editTodo(todoId, editedTodo, token)
  } catch (err) {
    // 保留原有错误处理逻辑
  }
})

2. 表单默认提交行为未拦截
   浏览器中出现GET请求替代PATCH请求的直接原因，是编辑提交逻辑绑定在form表单的submit事件上时，未调用e.preventDefault()阻止默认行为。表单默认提交会使用GET方法向当前页路径发起请求，完全覆盖写好的Axios请求，304状态码是浏览器缓存该GET请求的正常响应。
   修复方式：在handleEdit方法中加入事件拦截

const handleEdit = (e) => {
  e.preventDefault() // 阻止表单默认提交
  dispatch(editTodo({ todoId: todo._id, editedTodo }))
}

后端路由与控制器逻辑在Postman中可正常运行，无需修改。

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