Expo AV 播放回调奇怪行为与 state 属性

Question

我开始用这个 go 坚果。 我正在录制音频，一旦我停止录制作为此过程的一部分，我还会加载音频，以便在必要时可以播放它，在这里我执行setOnPlaybackStatusUpdate 。 我使用播放回调，以便可以根据positionMillis更新我的currentSeconds state 。

问题是我得到的currentSeconds和recordedDuration state 值。 它们的值如何在触发音频播放的playAudio方法和作为回调方法的onPlaybackStatusUpdate之间发生变化？

当我在控制台中使用 output 时，它们在两种方法中的值都是我期望它们相同时得到的：

In playAudio - currentSeconds: 0
In playAudio - recordedDuration: 4.5
In onPlaybackStatusUpdate - currentSeconds: 115.5
In onPlaybackStatusUpdate - recordedDuration: 0

这是代码：

const AudioRecorder = useRef(new Audio.Recording());
const AudioPlayer = useRef(new Audio.Sound());
const timerMaxDuration = 120
const [currentSeconds, setCurrentSeconds] = useState<number>(timerMaxDuration);
const [recordedDuration, setRecordedDuration] = useState<number>(0);

const stopRecording = async () => {
        try {
            await AudioRecorder.current.stopAndUnloadAsync();

            // To hear sound through speaker and not earpiece on iOS
            await Audio.setAudioModeAsync({ allowsRecordingIOS: false });

            const recordedURI = AudioRecorder.current.getURI();
            SetRecordingURI(recordedURI)

            AudioRecorder.current = new Audio.Recording();
            send('STOP')

            setRecordedDuration(+(timerMaxDuration - currentSeconds).toFixed(1)) // there is subtraction because during the recording there is a countdown from timerMaxDuration
            setCurrentSeconds(0)
            // Load audio after recording so that it is ready to be played
            loadAudio(recordedURI)
        } catch (error) {
            console.log(error);
        }
    };

    const loadAudio = async (recordedUri) => {
        try {
            const playerStatus = await AudioPlayer.current.getStatusAsync();
            if (playerStatus.isLoaded === false) {
                AudioPlayer.current.setOnPlaybackStatusUpdate(onPlaybackStatusUpdate)
                await AudioPlayer.current.loadAsync({ uri: recordedUri }, { progressUpdateIntervalMillis: 20 }, true)
            }
        } catch (error) {
            console.log(error)
        }
    }

    const playAudio = async () => {
        console.log(`In playAudio - currentSeconds: ${currentSeconds}`)
        console.log(`In playAudio - recordedDuration: ${recordedDuration}`)
        try {
            const playerStatus = await AudioPlayer.current.getStatusAsync();

            if (playerStatus.isLoaded) {
                if (playerStatus.isPlaying === false) {
                    AudioPlayer.current.playAsync();
                    send('PLAY')
                }
            }
        } catch (error) {
            console.log(error);
        }
    };

const onPlaybackStatusUpdate = playbackStatus => {
        if (playbackStatus.isPlaying) {
            console.log(`In onPlaybackStatusUpdate - currentSeconds: ${currentSeconds}`)
            console.log(`In onPlaybackStatusUpdate - recordedDuration: ${recordedDuration}`)
            if(currentSeconds >= recordedDuration){
                stopAudio()
            }
            else{
                setCurrentSeconds(+(playbackStatus.positionMillis / 1000).toFixed(1))
            }
        }
    }

Answer 1

好的，所以播放回调没有任何问题。 问题是两个播放回调都是一个箭头函数，这意味着在回调中唯一会改变的属性值是参数playbackStatus之一，其他属性的值将保持与创建function时相同。

React 中的一个解决方法是通过以下方式使用 useEffect，它允许访问 state 值currentSeconds和recordedDuration ：

useEffect(() => {
        if(currentSeconds >= recordedDuration)
            stopAudio()
    }, [currentSeconds]);

    const onPlaybackStatusUpdate = playbackStatus => {
        if (playbackStatus.isPlaying)
            setCurrentSeconds(+(playbackStatus.positionMillis / 1000).toFixed(1))
    }