React注册功能报错cannot read property username of undefined如何解决？

错误原因&修复方案 #

你遇到的cannot read property "username" of undefined报错本质是后端接收的request.body为undefined，结合前后端代码共有3处需要修复：

1. 前端请求体传值错误 #

你当前在Post方法中硬编码了空的请求参数，没有把用户输入的username、password状态传入请求体，修改signup.js的请求体部分：

// 原来的错误写法
body: JSON.stringify({
    username: "",
    password: "",
})
// 修改为
body: JSON.stringify({
    username,
    password
})

2. 后端未配置JSON解析中间件 #

Express默认不会自动解析POST请求的JSON格式请求体，需要在你的Express入口文件（通常是app.js/index.js）中、注册路由之前添加解析中间件：

app.use(express.json())

这一步是解决你当前报错的核心，添加后request.body就能正常读取到前端传的参数了。

3. 后端接口隐藏逻辑问题修复 #

你现有后端代码还有两处逻辑错误会导致后续运行异常：

• 变量名冲突：查询用的模型名和新建用户实例的变量名都是user，会触发变量未定义错误
• 异步逻辑顺序错误：用户存在性查询是异步操作，未等待查询结果返回就执行了新建用户逻辑，会导致重复创建用户
  修复后的完整auth.js接口代码如下：

router.post("/signup", async (request, response) => {
    const username = request.body.username;
    const password = request.body.password;

    // 校验必填字段
    if (!username || !password) {
        return response.status(422).json({ error: "请填写所有必填字段" })
    }

    try {
        // 先等待查询结果返回
        const savedUser = await user.findOne({ username: username })
        if (savedUser) {
            return response.status(422).json({ error: "该用户名已被注册"})
        }
        // 修改变量名避免冲突
        const newUser = new user({ username, password })
        await newUser.save()
        response.json({ message: "账号注册成功"})
    } catch (error) {
        console.log(error)
        response.status(500).json({ error: "服务器内部错误" })
    }
})

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