React函数组件中函数读取到旧state值与当前状态不一致如何修复

这是React函数组件的典型闭包特性：

• 函数组件每一次渲染都会生成独立的作用域，该作用域内的所有函数、变量都会固定捕获当次渲染的state、props值
• setState是异步批量执行的，调用后不会立刻修改当前作用域内的变量值，必须等组件完成重渲染，新渲染周期生成的作用域才会持有更新后的state
• React DevTools展示的是React内部存储的最终state值，和当前执行上下文闭包捕获的值不是同一个引用，所以会出现DevTools显示新值、代码里读旧值的现象

根据业务场景选对应方案即可，不需要找函数组件版的forceUpdate，强制重渲染解决不了闭包捕获旧值的本质问题。

• 方案1：直接使用事件回调里拿到的最新值，不依赖state
  你在CauseCodeChangeHandler里拿到的e.target.value就是用户选中的最新值，不需要等state更新，直接用这个值做后续联动逻辑即可：

  const CauseCodeChangeHandler = (e) => {
    const latestCauseCode = e.target.value;
    setSelectedCauseCode(latestCauseCode);
    // 直接传入最新值执行依赖编码的逻辑
    runCauseCodeRelateLogic(latestCauseCode);
  };
  
  // 抽离依赖原因编码的逻辑，入参传当前值
  const runCauseCodeRelateLogic = (currentCode) => {
    if (currentCode === "CUS") {
      // CUS分支逻辑
    } else if (currentCode === "OPS") {
      // OPS分支逻辑
    } else if (currentCode === "OOW") {
      // OOW分支逻辑
    }
  }
  
  const serQtyChangeHandler = (e) => {
    // 重渲染后触发的事件会拿到最新state，直接传入即可
    runCauseCodeRelateLogic(selectedCauseCode);
  }
  
  // 组件使用
  <ServiceSelectInput changeHandler={CauseCodeChangeHandler}/>
  

• 方案2：用useRef存最新值镜像，绕开闭包捕获限制
  ref的current属性是可变引用，不会被闭包固定，每次state更新时同步给ref，任何时候读ref.current都能拿到最新值：

  const [selectedCauseCode, setSelectedCauseCode] = useState("");
  // 建ref存最新值
  const causeCodeRef = useRef(selectedCauseCode);
  
  // state变化时同步更新ref
  useEffect(() => {
    causeCodeRef.current = selectedCauseCode;
  }, [selectedCauseCode]);
  
  const CauseCodeChangeHandler = (e) => {
    setSelectedCauseCode(e.target.value);
  };
  
  const serQtyChangeHandler = (e) => {
    // 从ref取永远是最新值
    const currentCode = causeCodeRef.current;
    if (currentCode === "CUS") {
      // CUS分支逻辑
    } else if (currentCode === "OPS") {
      // OPS分支逻辑
    } else if (currentCode === "OOW") {
      // OOW分支逻辑
    }
  }
  

• 方案3：将依赖state的逻辑放到useEffect中，监听state变化执行
  useEffect会在监听的state更新完成、组件重渲染后执行，此时拿到的一定是最新state值：

  const CauseCodeChangeHandler = (e) => {
    setSelectedCauseCode(e.target.value);
  };
  
  const serQtyChangeHandler = (e) => {
    // 仅处理服务数量本身的独立逻辑
  }
  
  // 监听selectedCauseCode变化，更新后自动执行
  useEffect(() => {
    if (selectedCauseCode === "CUS") {
      // CUS分支逻辑
    } else if (selectedCauseCode === "OPS") {
      // OPS分支逻辑
    } else if (selectedCauseCode === "OOW") {
      // OOW分支逻辑
    }
  }, [selectedCauseCode])
  

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