React useState状态更新延迟问题：为何首次打印isAdmin为false？如何立即生效？

先看你提供的代码：

import React from 'react';
import { useState, useEffect } from 'react' 

export function App() {

  let [isAdmin, setAdmin] = useState(false)

  const checkIfAdmin = async() => {
    setAdmin(true)
  }

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

  console.log(isAdmin)

  return (
    <div className='App'>
      <h1>test</h1>
    </div>
  );
}

为什么首次打印isAdmin是false，点击事件里却是true？ #

核心原因是React的useState更新是异步的：

• 组件首次渲染时，isAdmin初始值为false，此时执行console.log(isAdmin)会输出false。
• useEffect在首次渲染完成后执行，调用checkIfAdmin里的setAdmin(true)，这个操作不会立刻修改isAdmin的值，只是通知React状态需要更新，随后触发组件重新渲染。
• 组件重新渲染时，isAdmin被更新为true，此时console.log(isAdmin)会输出true，但你看到的「首次打印」是第一次渲染的结果，所以显示false。
• 点击事件是在组件重新渲染完成后触发的，此时组件已经使用更新后的isAdmin状态，所以能拿到true。

怎么让状态变更后的逻辑即时执行？ #

如果想在isAdmin更新后立刻触发打印这类逻辑，有两种实用方式：

1. 用useEffect监听状态变化 #

把需要执行的逻辑放在监听isAdmin的useEffect中，状态更新时自动触发：

import React from 'react';
import { useState, useEffect } from 'react' 

export function App() {
  const [isAdmin, setAdmin] = useState(false)

  const checkIfAdmin = async() => {
    setAdmin(true)
  }

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

  // 监听isAdmin变化，状态更新时执行对应逻辑
  useEffect(() => {
    console.log(isAdmin); // 首次渲染后打印false，状态更新后打印true
  }, [isAdmin]);

  return (
    <div className='App'>
      <h1>test</h1>
    </div>
  );
}

2. 直接使用要设置的状态值（适合异步场景） #

如果checkIfAdmin里有真实异步操作（比如接口请求），可以先把接口返回的结果存到变量里，调用setAdmin后直接用这个变量做后续逻辑，不用等待状态更新：

const checkIfAdmin = async() => {
  // 模拟接口请求获取权限状态
  const adminStatus = await fetch('/api/check-admin').then(res => res.json());
  setAdmin(adminStatus);
  console.log(adminStatus); // 这里能立刻拿到最新值，无需依赖状态
}

注意：不要试图强制让setAdmin同步生效，React的异步更新是为了优化渲染性能、批量处理状态更新，强制同步反而会破坏React的渲染机制。

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