Next.js中用react-query的useMutation提交POST至MongoDB失败

开发者阿泽

2026-8-2

问题原因

你的后端postUser方法试图从req.body中解构formData字段，但前端发送的请求体是直接的{name, email}对象，并没有嵌套在formData属性下，导致后端无法获取到预期字段，触发了“Form data not provided”的错误。

解决方案

两种修复方式任选其一即可：

方式一：修改前端辅助函数，将数据包裹在`formData`中

调整addUser的请求体结构，把用户数据放在formData字段里：

/*** POST new user ***/
export const addUser = async (formData) => {
    const Options = {
        method: "POST",
        headers: {'Content-Type': 'application/json'},
        // 将数据包裹在formData属性中
        body: JSON.stringify({ formData })
    }

    try {
        const response = await fetch(`${BASE_URL}/api/users`, Options)
        const json = await response.json()
        return json
    } catch(error) {
        console.log(error)
        return error
    }
}

方式二：修改后端控制器，直接使用`req.body`中的数据

既然前端发送的是平级的name和email，后端可以直接读取req.body，无需解构formData：

/*** POST http://localhost:3000/api/users ***/
// 记得补充导入AddedUser模型，比如：import AddedUser from "../../models/AddedUser"
export async function postUser(req, res) {
    try {
        const formData = req.body
        console.log("API", formData)
        // 校验请求体是否为空
        if(!formData || Object.keys(formData).length === 0) {
            return res.status(400).json({error: "Form data not provided"})
        }

        await AddedUser.create(formData, function(err, data){
            if(err) return res.status(500).json({error: err.message})
            return res.status(200).json(data)
        });
    } catch(error) {
        res.status(500).json({error: error.message})
    }
}