React Native中使用setTimeout访问State变量始终未定义问题求助

我尝试在React Native中使用setTimeout调用一个操作状态的方法，但无论如何操作，state变量始终为undefined。

// recordingObj 是Expo-AV的RecordingObject实例
const [recordingObj, setRecording] = useState();
let noSpeechTimer = null;

async function startRecording() {
      const { recording } = await Audio.Recording.createAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY);
      setRecording(recording);

      noSpeechTimer = setTimeout(()=> {
        console.log("NO SPEECH DETECTED")
        stopRecording();
      }, 5000);
}

async function stopRecording() {
    await recordingObj.stopAndUnloadAsync(); // <-- 此处报错，recording未定义
    setRecording(undefined);
    ...
}

我尝试用useRef定义noSpeechTimer，但没有效果；也尝试为recordingObj创建useRef变量并调用recordingObjRef.current.stopAndUnloadAsync()，同样无效，实在不知道问题出在哪。

问题原因及解决方案 #

核心问题：闭包与React状态的异步更新 #

• setState的异步性：setRecording(recording)是异步操作，调用后不会立即更新recordingObj的状态值。
• 闭包捕获旧值：setTimeout的回调函数会捕获定义它时的recordingObj值（也就是初始的undefined），所以5秒后调用stopRecording时，函数里的recordingObj还是旧值。

正确的解决方式 #

方案1：直接传递recording实例

不需要依赖state，直接把创建好的recording对象传给stopRecording，避开闭包问题：

const [recordingObj, setRecording] = useState();
const timerRef = useRef(null);

async function startRecording() {
  const { recording } = await Audio.Recording.createAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY);
  setRecording(recording);

  timerRef.current = setTimeout(()=> {
    console.log("NO SPEECH DETECTED")
    stopRecording(recording); // 直接传递当前的recording实例
  }, 5000);
}

async function stopRecording(targetRecording) {
  if (!targetRecording) return;
  await targetRecording.stopAndUnloadAsync();
  setRecording(undefined);
  // 其他后续逻辑
}

// 组件卸载时清除定时器
useEffect(() => {
  return () => {
    if (timerRef.current) clearTimeout(timerRef.current);
  };
}, []);

方案2：用useRef同步最新的recording实例

如果需要依赖ref管理，要通过useEffect监听state变化，确保ref始终指向最新的实例：

const [recordingObj, setRecording] = useState();
const recordingRef = useRef();
const timerRef = useRef(null);

// 监听state更新，同步到ref
useEffect(() => {
  recordingRef.current = recordingObj;
}, [recordingObj]);

async function startRecording() {
  const { recording } = await Audio.Recording.createAsync(Audio.RecordingOptionsPresets.HIGH_QUALITY);
  setRecording(recording);

  timerRef.current = setTimeout(()=> {
    console.log("NO SPEECH DETECTED")
    stopRecording();
  }, 5000);
}

async function stopRecording() {
  if (!recordingRef.current) return;
  await recordingRef.current.stopAndUnloadAsync();
  setRecording(undefined);
  // 其他后续逻辑
}

// 组件卸载时清除定时器
useEffect(() => {
  return () => {
    if (timerRef.current) clearTimeout(timerRef.current);
  };
}, []);

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