React中调用useState的set方法后如何获取const变量的最新值？场景问题求助

这个问题的核心在于React的useState状态更新是异步批量处理的，组件只有在重新渲染时才会拿到更新后的状态值。咱们一步步拆解解决：

1. 为什么listPermissionIds是空的？ #

你定义的listPermissionIds = permissionIds是在组件每次渲染时执行的：

• 初始渲染时，permissionIds是空数组，所以listPermissionIds也同步为空；
• 当fetchPermission里的异步请求完成后，调用setPermissionIds(_permissionIds)只会标记组件需要重新渲染，但当前渲染周期里的permissionIds还是旧值，因此listPermissionIds依然是空的；
• 直到组件完成重新渲染，permissionIds更新为新值，listPermissionIds才会被重新赋值为最新的数组。

2. 针对不同场景的解决方案 #

场景一：在组件渲染时使用新值 #

如果只是在渲染阶段（比如渲染权限列表、展示数据）需要listPermissionIds，直接使用permissionIds即可；如果需要对permissionIds做加工处理，用useMemo缓存计算结果避免重复计算：

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

// ... 其他代码

// 直接使用permissionIds，或用useMemo处理后使用
const listPermissionIds = useMemo(() => {
  // 这里可以添加对permissionIds的自定义处理，比如过滤、格式转换
  return permissionIds;
}, [permissionIds]); // 仅当permissionIds变化时重新计算

场景二：在setPermissionIds后立即使用新值 #

如果你需要在调用setPermissionIds后立刻使用最新的权限ID（比如触发其他异步请求、调用工具函数），直接用请求返回的_permissionIds变量就行，不需要等状态更新：

const fetchPermission = async () => {
  let _permissionIds = await permission.getPermissionRole('admin/roles/1');
  setPermissionIds(_permissionIds);
  // 这里直接使用_permissionIds，它就是最新的权限ID数组
  doSomethingWithPermissionIds(_permissionIds);
}

场景三：依赖新状态执行副作用 #

如果需要在permissionIds更新后执行某些操作（比如同步到其他状态、调用第三方SDK），用useEffect监听permissionIds的变化：

useEffect(() => {
  // 当permissionIds更新时，这个副作用会自动触发
  if (permissionIds.length > 0) {
    console.log('最新的权限ID:', permissionIds);
    // 在这里处理listPermissionIds相关逻辑，比如更新ref或其他状态
  }
}, [permissionIds]); // 仅当permissionIds变化时执行

总结 #

React的状态更新不会同步改变当前渲染周期里的状态变量，要根据使用场景选择对应方式：渲染时用状态本身或useMemo；立即使用就用请求返回的变量；需要副作用就用useEffect监听状态变化。

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