React状态函数引用旧状态值问题及解决方案咨询

问题本质 #

你遇到的是闭包捕获旧值的问题：onStep函数在onReady执行时创建，它捕获了当时的target（步骤0对应的10）。后续即使currentStep更新，这个已经存在stepsProps里的旧函数，依然保留着对旧target的引用，不会自动同步最新值。

解决方案 #

方案1：避免将函数存入state（推荐） #

如果stepsProps仅用于存储回调逻辑，完全可以不用state来保存，改用useCallback生成依赖正确的函数，或者直接在调用时执行逻辑：

type StepsActionType = {
  onStep: () => void;
  // ... other props
}
type StepsType = {
  hint: string
  target: number
}

const [currentStep, setCurrentStep] = React.useState<number>(0);
const [isReady, setIsReady] = React.useState(false); // 用状态标记是否就绪

const availableSteps = [
  { hint: 'first step', target: 10 },
  { hint: 'second step', target: 20 }
];
const { hint, target } = availableSteps[currentStep];

// 用useCallback生成依赖正确的onStep，target变化时自动更新函数
const onStep = React.useCallback(() => {
  console.log('target', target);
  // ... 其他计算逻辑
}, [target]);

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

function onReady() {
  console.log("now ready");
  setIsReady(true);
}

function increaseStep() {
  setCurrentStep((current) => {
    const next = current + 1;
    console.log("next step", next);
    return next;
  });
}

function handleStep() {
  if (isReady) {
    onStep();
  }
}

return <>
  step hint: { hint }
  <button onClick={increaseStep}>增加步骤</button>
  <button onClick={handleStep}>执行步骤</button>
</>

方案2：必须存state时，用useEffect监听依赖更新 #

如果业务场景要求必须将函数存入stepsProps，可以通过useEffect监听target（或currentStep）的变化，在依赖更新时重新生成函数并更新state：

type StepsActionType = {
  onStep: () => void;
  // ... other props
}
type StepsType = {
  hint: string
  target: number
}

const [stepsProps, setStepsProps] = React.useState<Partial<StepsActionType>>({});
const [currentStep, setCurrentStep] = React.useState<number>(0);
const [isReady, setIsReady] = React.useState(false);

const availableSteps = [
  { hint: 'first step', target: 10 },
  { hint: 'second step', target: 20 }
];
const { hint, target } = availableSteps[currentStep];

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

// 监听target和isReady，就绪后更新stepsProps
useEffect(() => {
  if (isReady) {
    setStepsProps({
      onStep: () => {
        console.log('target', target);
        // ... 其他计算逻辑
      }
    });
  }
}, [target, isReady]);

function onReady() {
  console.log("now ready");
  setIsReady(true);
}

function increaseStep() {
  setCurrentStep((current) => {
    const next = current + 1;
    console.log("next step", next);
    return next;
  });
}

function handleStep() {
  stepsProps.onStep?.();
}

return <>
  step hint: { hint }
  <button onClick={increaseStep}>增加步骤</button>
  <button onClick={handleStep}>执行步骤</button>
</>

useEffect与useCallback的适用场景 #

• useCallback：核心是缓存函数引用，避免因函数频繁重建导致子组件不必要重渲染（比如传给React.memo包裹的子组件）。同时它能保证函数捕获最新的依赖值，适合需要稳定函数引用且依赖明确的场景。
• useEffect：核心是处理副作用，比如数据请求、DOM操作，或是在依赖变化时更新state/执行特定逻辑。适合需要响应状态变化触发动作的场景。

简单来说：如果是为了优化组件渲染、传递稳定函数给子组件，用useCallback；如果是要在状态变化时执行副作用（比如更新state），用useEffect。

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