React项目中useEffect内打印User对象为空，API调用函数内却能获取完整数据的问题求助

这问题我之前也碰到过！核心原因是React的useState更新是异步的，再加上你的useEffect依赖设置的问题，导致你在错误的时机打印了user。

问题拆解 #

组件首次挂载时，空依赖的useEffect会按顺序执行：

1. 调用getSelectedUser()，这个函数内部发起了异步API请求
2. 紧接着执行console.log(user)，这时候请求还没完成，setUser(data)要么还没触发，要么触发了但React还没完成状态更新，所以user还是你初始化的initialUser（空对象）
3. 等API请求完成后，getSelectedUser里拿到了完整的data，执行setUser(data)标记组件需要重新渲染，但这时候之前的useEffect已经执行完毕，不会再去打印user；而你在getSelectedUser里直接打印data，自然能看到完整的用户对象。

解决方案 #

方案1：监听user的变化来打印最新值

如果你想在user状态更新后看到它的内容，可以单独加一个监听user的useEffect：

const [user, setUser] = useState<IUser>(initialUser);

useEffect(() => {
  getSelectedUser();
}, []);

// 当user状态发生变化时，自动打印最新值
useEffect(() => {
  console.log(user);
}, [user]);

async function getSelectedUser() {
  const data = await getUserById(userId);
  setUser(data);
}

方案2：直接打印API返回的data

如果只是想确认API请求返回的数据是否正确，完全可以直接打印getUserById返回的data，不需要等user状态更新：

async function getSelectedUser() {
  const data = await getUserById(userId);
  console.log(data); // 这里直接拿到完整的用户对象
  setUser(data);
}

补充说明 #

React的setState是异步批量更新机制，这是为了优化性能、避免不必要的组件渲染。所以在调用setUser之后，不能立刻期望user变量变成新值，必须等组件重新渲染完成后，user才会更新为最新状态。

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