React+MongoDB页面加载时获取单个用户记录无输出问题排查

你的代码里存在几个关键错误，直接导致了页面无法显示用户数据，下面逐一说明并给出修正方案：

后端接口的问题 #

1. find()方法返回数组而非单个对象
   你使用user.find({ name: req.body.username })，这个方法会返回所有匹配条件的文档数组，哪怕只有一条数据。所以User是数组，直接访问User.name、User.username等属性会得到undefined，前端自然拿不到有效数据。
   应该改用findOne()方法获取单个匹配文档：

   const User = await user.findOne({ name: req.body.username })
   

2. 错误的空数据判断与响应逻辑
   find()返回的空数组在JavaScript中是真值（Boolean([]) === true），所以if (!User)永远不会触发错误分支。改用findOne()后，无匹配文档时会返回null，此时if (!User)才会生效。另外原错误分支直接返回对象，没有用res.json()发送响应，前端会收不到反馈，导致请求异常。
   修正后的后端代码：

   router.post('/getUser', async (req, res) => {
       console.log(req.body.username)
       const User = await user.findOne({ name: req.body.username })
   
       if (!User) {
           return res.json({ status: 'error', error: 'Invalid Login' })
       } else {
           return res.json({
               status: 'ok',
               name: User.name,
               username: User.username,
               email: User.email,
               company: User.company,
               position: User.position,
               level: User.userLevel
           })
       }
   })
   

前端代码的问题 #

1. setState时错误访问属性来源
   你已经把res.data赋值给了userinfo，但setState时却直接访问res.username、res.email——这些属性在res对象上不存在，必须从userinfo中读取：

   this.setState({
       name: userinfo.name,
       username: userinfo.username,
       email: userinfo.email,
       // 注意：密码不应该返回给前端，存在严重安全风险，建议后端移除该字段
       company: userinfo.company,
       position: userinfo.position
   })
   

2. 确认localStorage与后端字段的匹配性
   你从localStorage取的user赋值给userObject.username，后端查询条件是name: req.body.username，要确保localStorage中存储的user确实对应用户的name字段值；如果实际存的是username字段，后端查询条件要改成username: req.body.username，否则会查不到数据。

额外调试建议 #

• 打开浏览器控制台，查看console.log("hi"+res.data)的输出，确认后端返回的数据结构是否正确。
• 查看后端控制台的console.log(req.body.username)输出，确认前端发送的参数是否正确。
• 检查浏览器网络请求面板，查看接口的响应状态码和返回内容，确认请求是否成功。

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