React自定义Hook中，如何获取setState回调函数的返回值？

要解决这个问题，核心是根据传入值的类型做区分处理：判断传入的value是否为函数，若是则调用它并传入当前的状态值作为prev参数，就能拿到回调的返回值。

基础实现方案 #

直接在setWrapper里判断类型，调用函数并获取返回值，之后再做自定义处理或更新状态：

import { useState } from 'react';

const useHook = () => {
  const [stateValue, setStateValue] = useState('hello');
  
  const setWrapper = (value: string | ((prev: string) => string)) => {
    // 计算最终要使用的值
    const finalValue = typeof value === 'function' 
      ? (value as (prev: string) => string)(stateValue) 
      : value;
    
    // 这里就能拿到回调返回的结果（比如'hello world'），可做自定义处理
    console.log('处理后的值:', finalValue);
    
    // 调用原生setState更新状态
    setStateValue(finalValue);
  }

  return [stateValue, setWrapper] as const;
}

避免闭包旧值问题的优化方案 #

如果你的setWrapper可能在异步场景下调用（比如setTimeout、网络请求回调），直接用闭包中的stateValue可能会捕获到旧的状态值。这种情况下，可以借助原生setState的回调特性，确保拿到最新的prev状态：

import { useState } from 'react';

const useHook = () => {
  const [stateValue, setStateValue] = useState('hello');
  
  const setWrapper = (value: string | ((prev: string) => string)) => {
    setStateValue(prevState => {
      const finalValue = typeof value === 'function' ? value(prevState) : value;
      // 在这里基于最新的prevState处理值
      console.log('最新状态处理后的值:', finalValue);
      return finalValue;
    });
  }

  return [stateValue, setWrapper] as const;
}

关键说明 #

• 类型判断：用typeof value === 'function'区分两种输入类型
• TypeScript类型断言：因为TS无法自动推断函数类型，所以需要用(value as (prev: string) => string)做类型断言
• 异步场景适配：第二种方案通过原生setState的回调参数获取最新状态，避免闭包导致的旧值问题

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