使用Axios请求MongoDB用户数据时，为何ID字段返回undefined？

核心问题：useState异步更新导致的undefined #

控制台打印userName.id显示undefined，本质是useState的更新是异步的——调用setUserName后，userName并不会立刻切换为新值，此时访问的还是更新前的初始状态（初始状态里id大概率是undefined）。同时你计算头像首字母的init也会失效，因为userName.nameU和userName.surName同样是未更新的旧值。

解决方案 #

1. 直接用接口返回值计算，不依赖刚更新的state #

把计算逻辑改成直接从res.data取值，绕过异步更新的问题：

axios
  .get(`http://localhost:8080/api/auth/users/${decoded.email}`)
  .then((res) => {
    // 先解构接口返回的数据
    const { name, surname, _id } = res.data;
    // 更新userName状态
    setUserName({
      nameU: name,
      surName: surname,
      id: _id,
    });
    // 直接用接口返回值计算首字母
    const init = name.charAt(0) + surname.charAt(0);
    setAvatar({ initials: init });
    // 要查看id直接打印解构后的变量或res.data._id
    console.log(_id);
  })

2. 对齐前后端字段名 #

• 确认后端返回的用户数据里是否存在_id：MongoDB默认主键是_id，但部分后端会转成id返回，若接口返回的是id，需改成res.data.id。
• 检查字段匹配：你的MongoDB User集合里是username字段，但代码里用了surName，如果集合没有surname字段，这里会拿到undefined，需改成surName: res.data.username（或后端调整返回字段）。

3. 依赖state更新后的逻辑用useEffect监听 #

如果后续有必须在userName更新后执行的操作，用useEffect监听状态变化：

useEffect(() => {
  // userName更新后触发此逻辑
  if (userName.id) {
    console.log(userName.id);
    // 其他依赖最新userName的操作
  }
}, [userName]); // 监听userName的变化

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