React中useState异步更新问题：录制应用设置recordTargetStream不生效

• useCallback 闭包陷阱：你给 startRecording 包裹的 useCallback 依赖数组为空，因此这个函数只会在组件首次渲染时生成一次，捕获到的是初始状态下的 recordTargetStream（值为 undefined）。后续状态更新后，useCallback 没有触发重新生成，函数内部读取的始终是首次渲染时的旧值。
• 异步更新问题：如果你在调用 setRecordTargetStream 后立刻执行 startRecording，React 的状态更新是异步批量处理的，当前渲染上下文中的状态还没来得及更新，读取时也会拿到旧值。

方案1：补全 useCallback 依赖 #

将 recordTargetStream 加入 startRecording 的依赖数组，状态更新后会自动生成新的函数，捕获最新的状态值：

const startRecording = useCallback(() => {
  console.log('start recording', recordTargetStream)
  // 后续录制逻辑
}, [recordTargetStream]) // 此处添加状态依赖

同时可以给开始录制按钮添加禁用状态，避免用户在流获取完成前点击：

<button onClick={startRecording} disabled={!recordTargetStream}>开始录制</button>

方案2：通过 useRef 绕开闭包问题 #

如果不想频繁更新 useCallback 依赖，可以用 useRef 同步存储流对象，更新状态时同步更新 ref，录制时直接读取 ref 的值：

const [recordTargetStream, setRecordTargetStream] = useState<MediaStream>()
// 新增ref存储流引用
const recordTargetStreamRef = useRef<MediaStream>()

const requestPermissions = useCallback(async() => {
  const stream = await window.navigator.mediaDevices.getUserMedia({audio: true, video: true})
  setRecordTargetStream(stream)
  // 同步更新ref
  recordTargetStreamRef.current = stream
}, [])

const startRecording = useCallback(() => {
  const stream = recordTargetStreamRef.current
  if (!stream) return
  console.log('start recording', stream)
  // 直接使用stream变量处理录制逻辑
}, []) // 无需添加依赖，始终能拿到最新值

方案3：自动录制场景的处理 #

如果需求是拿到流后自动开始录制，不要在 setRecordTargetStream 后直接调用 startRecording，通过 useEffect 监听流状态变化后触发：

useEffect(() => {
  if (recordTargetStream) {
    startRecording()
  }
}, [recordTargetStream, startRecording])

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