音频播放完毕后执行setState

Question

基本上我在 UI 中有一个录制的音频，其中有一个 play/pause 按钮。有一个 state 属性 playing 根据 this.state.playing 是 true 还是 false 决定应该在该按钮中呈现什么图标。现在的问题是音频播放完毕后，暂停图标并没有自动变为播放图标，原因是this.state.playing仍然是true。我知道我需要在音频播放完成后执行 setState 并将 playing 更改为 false。我的问题是我应该在哪里执行 setState 以确保它只在音频播放完全后才执行？

state = {
        playing: false
    }

onPlayPause = () => {
        let { playing } = this.state 
        if(playing) {
            this.setState({ playing: false })
            this.audio_el.current.pause()
        } else {
            this.setState({ playing: true })
            this.audio_el.current.play()
            // Need to make {playing: false} only after play() is completed
        }
    }

内部render()方法：

<Button onClick={ this.onPlayPause } icon={ playing ? "pause" : "play" }/>

我尝试在 componentDidMount() 中执行 setState 但没有成功 :(

Answer 1

尝试仅通过在音频元素上调用 onEnded 的媒体事件（更多相关信息：https://reactjs.org/docs/events.html#media-events）将新方法与 setState 绑定。这应该可以完成工作。

你在 render() 中有这样的东西：

<audio src="..." onEnded={this.setFinished}>

然后添加这个方法：

setFinished = () => {
    this.setState({
        playing: false
    })
}

音频播放完毕后执行setState

Perform setState after audio is played completely

setstate

reactjs