使用 setTimeout 和访问 state 在 React Native 中不起作用

Question

我正在尝试让 setTimeout function 调用一种适用于某些 state 的方法，但无论我做什么，state 变量始终未定义。

// recordingObj is an instance of Expo-AV's `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(); // <-- Errors here. `recording` is undefined
    setRecording(undefined);
    ...
}

我尝试使用useRef()设置noSpeechTimer ，但没有用。 我尝试为 recordingObj 创建第二个变量并使用useRef()进行设置，然后调用recordingObjRef.current.stopAndUnloadAsync()但这没有用。 对于发生的事情，我真的很困惑。

Answer 1

调用setState function 会做两件事：

• 为下一次渲染更新 state 的值
• 触发新的渲染

这意味着来自setState(value)的更新值在下一次渲染之前将不可用。

您的案例可以通过参考解决：

const recordingRef = useRef(null);

// ...
recordingRef.current = recording;

// ...

if (recordingRef.current)
   recordingRef.current.stopAndUnloadAsync()

recordingRef.current = null;