React中如何立即获取useState更新后的变量值？

React的useState更新是异步批量处理的，调用settype后当前函数作用域里的type还是旧值，没法直接拿到更新后的值。给你几个可行的解决办法：

• 直接用事件对象里的最新值：既然已经拿到e.target.value，要打印或做后续操作，直接用这个值就行，不用等state更新：

  let handleTypeChange = (e) => {
      const newValue = e.target.value;
      settype(newValue);
      console.log(newValue); // 这里直接用newValue就是最新值
  }
  

• 用useEffect监听type变化：如果后续逻辑必须依赖更新后的state，就把逻辑放在useEffect里，当type变化时自动触发：

  useEffect(() => {
      console.log(type); // 每次type更新后都会执行这里
      // 其他依赖最新type的逻辑也可以放在这里
  }, [type]); // 依赖数组添加type，仅在type变化时触发
  

注意：函数式更新（settype(prev => newValue)）是用来处理需要依赖旧state计算新值的场景，不是用来立即获取新state的，所以你之前尝试后没用是正常的。

这里核心问题还是setcustId是异步的，调用后当前作用域的custId不会立刻更新。解决思路很直接，直接用已经拿到的URL参数值，不用等state更新：

方法一：直接传递参数 #

既然已经从URL里拿到了custId，直接把这个值传给getDetails和getUser，不需要依赖state：

useEffect(() => {       
    const queryParameters = new URLSearchParams(window.location.search)
    const custIdFromUrl = queryParameters.get("custId")
    if (custIdFromUrl) {            
        setcustId(custIdFromUrl); 
        getDetails(custIdFromUrl); // 直接传递拿到的参数
    }        
}, [])

const getDetails = (id) => {
    if (id != null) 
    {
        getUser(id); // 继续向下传递参数
    }
}

const getUser = (id) => {
    service.getUser(id)
        .then(function (result) {
            //...处理返回结果
        });
};

方法二：用useEffect监听custId变化 #

如果一定要基于state触发逻辑，就用useEffect监听custId，当它更新时再调用getDetails：

useEffect(() => {       
    const queryParameters = new URLSearchParams(window.location.search)
    const custIdFromUrl = queryParameters.get("custId")
    if (custIdFromUrl) {            
        setcustId(custIdFromUrl); 
    }        
}, [])

// 新增useEffect监听custId变化
useEffect(() => {
    if (custId) {
        getDetails();
    }
}, [custId]); // 依赖custId，更新时触发

const getDetails = () => {
    getUser();        
}

const getUser = () => {
    service.getUser(custId)
        .then(function (result) {
            //...处理返回结果
        });
};

另外，你这里使用setcustId(x => custId)是没必要的，因为custId是从URL拿到的，不依赖之前的state值，直接setcustId(custIdFromUrl)即可。

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