为什么在useEffect中调用useState更新方法后立刻打印state仍为旧值？

这是React的两个底层特性共同导致的：

• React的useState返回的状态更新函数是异步批处理的：调用setuserId(id)后，React不会立即修改当前执行上下文里的userId变量，只会把更新任务推入队列，等当前所有同步代码（也就是你写的console.log这行及之后的同批次代码）执行完毕后，才会合并更新、触发组件重渲染。
• 闭包捕获特性：你当前的useEffect只在组件首次挂载时执行1次（依赖项是空数组），这个回调函数的闭包捕获的是首次渲染时的userId值也就是null，只要这个闭包没有重新执行，内部访问到的userId永远是初始的null，不会因为你调用了状态更新函数就改变。

在组件函数顶层加一行打印，就能看到状态更新的时机：

function Component() {
const [userId, setuserId]= useState(null);
console.log('组件渲染，当前userId：', userId); // 新增这行
// 剩下的原有代码
}

运行后你会看到两次打印：

1. 首次渲染打印：组件渲染，当前userId： null
2. 调用setuserId触发重渲染后打印：组件渲染，当前userId： 616830f1491ef15dc0ba5a6a

根据你的使用场景选对应方案即可：

• 如果你只是要在拿到id后做后续逻辑，直接用then回调里已经拿到的id参数即可，不需要读取userId状态。
• 如果你需要在userId状态更新后执行逻辑，单独加一个监听userId变化的useEffect：

useEffect(() => {
  if (userId) {
    console.log("更新后的userId是：", userId);
    // 此处写状态更新后的业务逻辑
  }
}, [userId])

额外优化提示：你现有的getUserId方法没有写catch回调，当localStorage里不存在userId时会触发未捕获的Promise错误，建议补充catch处理避免页面报错。

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