React函数组件中函数无法获取最新state值的问题求助

你遇到的是React函数组件的闭包陷阱：组件初始渲染时，useEffect执行并生成stageOrder，其中存储的validateOne是当前渲染周期的函数实例，它捕获了初始状态的inputName（null）。后续inputName更新触发组件重新渲染时，会生成新的validateOne，但stageOrder并未更新，调用时依然使用旧的函数实例，因此无法获取最新的inputName值。

方案1：动态调用验证函数（推荐） #

不在stageOrder中存储函数实例，仅存储阶段标识，在nextStage中根据标识动态调用当前渲染周期的验证函数，确保每次都能获取最新状态。

export default function App(props) {
  const [currentStage, setStage] = useState(0);
  const [stageOrder, setStageOrder] = useState([]);
  const [inputName, setInput] = useState(null);
  const [invalid, setInvalid] = useState(false);

  // 仅存储阶段元数据，不绑定函数
  const stageDefinitions = {
    [StageType.ONE]: { id: StageType.ONE },
    [StageType.TWO]: { id: StageType.TWO },
  };

  // 单独维护验证函数，每次渲染都会生成最新实例
  const validators = {
    [StageType.ONE]: () => {
      console.log("inputName", inputName);
      return inputName && inputName.length > 1;
    },
    [StageType.TWO]: () => props.two > 1,
  };

  useEffect(() => {
    let order = props.flag ? [StageType.ONE, StageType.TWO] : [StageType.ONE];
    order = order.map((s) => stageDefinitions[s]);
    setStageOrder(order);
  }, [props.flag]);

  function nextStage() {
    if (currentStage === stageOrder.length - 1) return;

    const stage = stageOrder[currentStage];
    // 动态调用最新的验证函数
    const isValid = validators[stage.id]();

    if (isValid) setStage(currentStage + 1);
    setInvalid(!isValid);
  }

  function handleClick() {
    setInput(`${Math.random()}`);
  }

  return (
    <div>
      <div>Value: {inputName}</div>
      {invalid && <div style={{ color: "red" }}>INVALID</div>}

      <div>Stage: {currentStage}</div>

      <button onClick={handleClick}>Set Value</button>
      <button onClick={nextStage}>Next Stage</button>
    </div>
  );
}

方案2：用useRef保存最新验证函数 #

通过useRef存储验证函数的最新实例，让stageOrder中的包装函数始终访问最新版本的验证逻辑。

export default function App(props) {
  const [currentStage, setStage] = useState(0);
  const [stageOrder, setStageOrder] = useState([]);
  const [inputName, setInput] = useState(null);
  const [invalid, setInvalid] = useState(false);

  // 用ref保存最新的验证函数
  const validatorRef = useRef({});

  // 每次渲染更新ref中的函数实例
  validatorRef.current = {
    [StageType.ONE]: () => {
      console.log("inputName", inputName);
      return inputName && inputName.length > 1;
    },
    [StageType.TWO]: () => props.two > 1,
  };

  const stageDefinitions = {
    [StageType.ONE]: { 
      id: StageType.ONE, 
      validator: () => validatorRef.current[StageType.ONE]() 
    },
    [StageType.TWO]: { 
      id: StageType.TWO, 
      validator: () => validatorRef.current[StageType.TWO]() 
    },
  };

  useEffect(() => {
    let order = props.flag ? [StageType.ONE, StageType.TWO] : [StageType.ONE];
    order = order.map((s) => stageDefinitions[s]);
    setStageOrder(order);
  }, [props.flag]);

  function nextStage() {
    if (currentStage === stageOrder.length - 1) return;

    const stage = stageOrder[currentStage];
    const isValid = stage.validator();

    if (isValid) setStage(currentStage + 1);
    setInvalid(!isValid);
  }

  function handleClick() {
    setInput(`${Math.random()}`);
  }

  return (
    <div>
      <div>Value: {inputName}</div>
      {invalid && <div style={{ color: "red" }}>INVALID</div>}

      <div>Stage: {currentStage}</div>

      <button onClick={handleClick}>Set Value</button>
      <button onClick={nextStage}>Next Stage</button>
    </div>
  );
}

方案3：让stageOrder随依赖更新 #

用useMemo生成stageDefinitions，并将其加入useEffect的依赖列表，确保stageOrder在状态或props变化时同步更新。

export default function App(props) {
  const [currentStage, setStage] = useState(0);
  const [stageOrder, setStageOrder] = useState([]);
  const [inputName, setInput] = useState(null);
  const [invalid, setInvalid] = useState(false);

  // 用useMemo生成带最新验证函数的定义，依赖inputName和props
  const stageDefinitions = useMemo(() => ({
    [StageType.ONE]: { 
      id: StageType.ONE, 
      validator: () => {
        console.log("inputName", inputName);
        return inputName && inputName.length > 1;
      } 
    },
    [StageType.TWO]: { 
      id: StageType.TWO, 
      validator: () => props.two > 1 
    },
  }), [inputName, props.two]);

  useEffect(() => {
    let order = props.flag ? [StageType.ONE, StageType.TWO] : [StageType.ONE];
    order = order.map((s) => stageDefinitions[s]);
    setStageOrder(order);
  }, [props.flag, stageDefinitions]);

  function nextStage() {
    if (currentStage === stageOrder.length - 1) return;

    const stage = stageOrder[currentStage];
    const isValid = stage.validator();

    if (isValid) setStage(currentStage + 1);
    setInvalid(!isValid);
  }

  function handleClick() {
    setInput(`${Math.random()}`);
  }

  return (
    <div>
      <div>Value: {inputName}</div>
      {invalid && <div style={{ color: "red" }}>INVALID</div>}

      <div>Stage: {currentStage}</div>

      <button onClick={handleClick}>Set Value</button>
      <button onClick={nextStage}>Next Stage</button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Julián McClinton