React Context状态更新后API调用获取旧state值如何解决

• React的状态更新是异步调度、批量执行的：调用setUserAnswers时，React不会立刻修改状态值，只是将更新任务加入调度队列，等到当前同步执行逻辑全部完成后，才会统一处理更新、触发组件重渲染，新的状态值只会在下一次组件渲染生成的闭包中生效。
• 事件处理函数存在闭包捕获特性：handleFormSubmit是当前组件渲染周期内生成的函数，它的词法作用域中捕获的userAnswers是本次渲染的固定快照值，即使在函数内部调用了状态更新方法，当前作用域内的userAnswers依然是旧值，不会同步变更。

当前代码在同一个同步执行流中完成状态更新调用和API请求，请求读取的自然是闭包中捕获的旧状态值。

优先选择第一种方案，代码可读性最高、维护成本最低，不会引入额外的竞态风险：

方案1：提前构造最新状态值，复用于更新和请求 #

不需要等待状态更新完成，在提交逻辑中先计算出最终要提交的完整新值，同时用于状态更新和接口请求：

const handleFormSubmit = async () => {
  // 提前构造最新的答案对象
  const latestUserAnswers = {
    ...userAnswers,
    userConsent: values.userConsent
  }
  // 用新值更新Context状态
  setUserAnswers(latestUserAnswers)

  try {
    // 直接使用构造好的新值发请求，不依赖闭包中的旧状态
    await saveAnswersOnBackend({
      userAnswers: {
        userConsent: latestUserAnswers.userConsent
      }
    })
  } catch (err) {
    handleError(err)
  }
}

方案2：通过useEffect监听状态变化，等更新完成后触发请求 #

如果业务逻辑强依赖「Context状态全局更新完成后再发请求」的时序，可以通过状态标记+副作用监听的方式实现：

import { useEffect, useState } from 'react'

export const Component = () => {
  const { userAnswers, setUserAnswers } = myCustomHook();
  const { saveAnswersOnBackend } = useSaveAnswers()
  // 提交标记，用来触发副作用中的请求逻辑
  const [submitTrigger, setSubmitTrigger] = useState(false)

  useEffect(() => {
    // 没有提交标记时不执行请求
    if (!submitTrigger) return

    const doSubmit = async () => {
      try {
        // 此时userAnswers已经是更新完成的最新值
        await saveAnswersOnBackend({
          userAnswers: {
            userConsent: userAnswers.userConsent
          }
        })
      } catch (err) {
        handleError(err)
      } finally {
        // 重置提交标记，避免重复触发
        setSubmitTrigger(false)
      }
    }
    doSubmit()
    // 依赖项加入submitTrigger和userAnswers，保证状态更新后才执行
  }, [submitTrigger, userAnswers])

  const handleFormSubmit = () => {
    // 先更新Context状态
    setUserAnswers(prev => ({
      ...prev,
      userConsent: values.userConsent,
    }))
    // 打开提交标记，等状态更新完成后触发useEffect里的请求
    setSubmitTrigger(true)
  }
}

注意：该方案需要做好重复提交拦截、依赖项对齐，避免出现不触发、重复触发的问题。

方案3：使用useRef同步存储最新状态值 #

如果场景复杂不方便提前构造新值，可以用useRef存储一份同步更新的状态副本，ref的更新是同步生效的，不存在闭包捕获问题：

import { useRef, useEffect } from 'react'

export const Component = () => {
  const { userAnswers, setUserAnswers } = myCustomHook();
  const { saveAnswersOnBackend } = useSaveAnswers()
  // 初始化ref存储状态副本
  const userAnswersRef = useRef(userAnswers)
  // 每次状态变化同步更新ref值，保证ref里永远是最新状态
  useEffect(() => {
    userAnswersRef.current = userAnswers
  }, [userAnswers])

  const handleFormSubmit = async () => {
    const newConsent = values.userConsent
    // 更新Context状态
    setUserAnswers(prev => ({
      ...prev,
      userConsent: newConsent,
    }))
    // 同步更新ref值
    userAnswersRef.current = {
      ...userAnswersRef.current,
      userConsent: newConsent
    }

    try {
      // 从ref中取最新值发请求
      await saveAnswersOnBackend({
        userAnswers: {
          userConsent: userAnswersRef.current.userConsent
        }
      })
    } catch (err) {
      handleError(err)
    }
  }
}

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