React运行报TypeError，useState不生效，setUser后User值为null如何解决

问题原因及解决方案 #

核心原因1：useState更新的异步特性

React 中useState返回的更新函数setUser是异步批量执行的，你在调用setUser(res.data)的同个代码块内立刻打印user，拿到的始终是当前渲染周期的旧值（也就是你定义的初始值null），状态更新要等到下一次组件重渲染才会生效，这是React的正常运行机制，不是真的没有存储成功。

核心原因2：初始值为null导致的TypeError

你的user状态初始值是null，在接口请求完成前的首次渲染阶段，如果你直接访问user的下属属性（比如user.name、user.avatar等），就会抛出你截图里的TypeError，因为null没有下属属性。

具体修复方案

• 验证状态是否真的更新成功，单独添加监听user变化的useEffect，回调内打印即可拿到最新值：

import { useState, useEffect } from 'react';

const [user, setUser] = useState(null);

// 监听user状态变化，回调触发时拿到的永远是最新值
useEffect(() => {
  console.log('最新的user值：', user);
}, [user]);

• 解决TypeError报错，所有访问user下属属性的位置都添加空值防护：
  1. 使用可选链运算符：user?.name、user?.id
  2. 条件渲染：只有user存在时才渲染对应内容

  {/* 错误写法，首次渲染会抛错 */}
  <div>用户名：{user.name}</div>
  
  {/* 正确写法 */}
  <div>用户名：{user?.name}</div>
  {/* 或者 */}
  {user && <div>用户名：{user.name}</div>}
  

• 额外排查项：检查代码中是否存在其他调用setUser(null)的逻辑，或者useEffect依赖项配置错误导致请求重复发起、状态被意外覆盖。

相关截图参考

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