React从localStorage获取对象后调用useState赋值失败是什么原因？

你遇到的不是setUser失效，这是React useState 状态更新的正常特性：

• React的状态更新函数是异步批量执行的，调用setUser(parsedUser)后不会立刻修改当前函数执行上下文里的user变量，只会把更新任务加入队列，等到当前所有同步代码执行完毕、组件触发重渲染后，新的状态值才会在新的渲染作用域中生效。
• 你的useEffect依赖是空数组，只会在App组件首次挂载完成后执行1次，执行时拿到的user是本次渲染的初始值null，调用setUser不会改变本次作用域内的user值，所以后续打印的结果自然是null。

你可以通过以下两种方式确认setUser实际已经生效：

1. 在App组件顶层（return语句之前）加打印语句，查看重渲染后的状态值：

const App = (props) => {
  const [user, setUser] = useState(null);
  console.log('当前渲染的user值：', user) // 首次渲染打印null，setUser触发重渲染后会打印解析完成的用户对象

  // ... 剩下的代码
}

2. 新增监听user变化的useEffect，可以拿到更新后的状态：

useEffect(() => {
  console.log('user更新后的值：', user)
}, [user])

你当前的实现还有一个隐藏问题：登录完成调用history.push("/home")跳转时，App组件不会重新挂载，空依赖的useEffect不会重新执行，此时如果没有额外的状态同步逻辑，跳转后页面拿到的还是旧的user值，只有手动刷新页面才能读到新登录的用户信息。
你可以选择两种方案解决：

• 登录成功后除了写localStorage，额外通过状态提升/Context/状态管理工具把新的用户信息同步到App组件的user状态
• 登录成功后调用window.location.reload()手动刷新页面触发App重新挂载（不推荐，体验较差）

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