Question

大家。我还习惯了React和React路由器，这是我没想到的一件事。

所以，我有一个可以同时播放视频（静音）和音轨的应用。我正在使用React Player来玩这两个游戏。我的观点看起来像这样（VideoPlayer是react-player标签）：

<div>
    <VideoPlayer url={this.props.audio} playing={this.state.playing} />
    <VideoPlayer url={this.props.video} playing={this.state.playing} />
</div>

此设置对我有用，我可以通过常见状态播放和控制它们。我可以通过一个连接到按钮的事件处理程序来阻止它们：

handleStop() {
    this.setState({playing: false})
}

这也有效。

然而，问题是，一旦我导航到不同的路线，音频（可能是视频）仍然在后台播放。实际上，让我改写一下，当我改变路线时，后台的音频重启。

在阅读this page from the react-router docs之后，我尝试在各种生命周期事件中包含用于调用handleStop的逻辑，但没有一个能够解决这个问题。到目前为止，我已尝试在handleStop，componentWillReceiveProps，componentWillUpdate和componentDidUpdate中拨打componentWillUnmount。

我得到的最接近的是将调用放入componentWillUnmount，但我总是收到一个关于设置未安装组件状态的错误（如果这被称为，它也没有意义在卸载之前？）。

那么，任何人都知道，有人知道把我的召唤放在handleStop的哪个位置吗？

提前致谢。

Answer 1

即使在移动逻辑将URL推入handleStop之后，我也从未找到答案。所以我只是使用window.location.href = '...'更改了页面。哈基，但它奏效了。

Answer 2

我知道这个问题已经超过4年了，但是今天我遇到了这个问题，想分享解决问题的方法...

import React, { useRef, useEffect } from 'react';
import waves from '../audio/waves.mp3';
    
const RockyCoast = (props) => {
    // the audio variable needs to be stored in a ref in order to access it across renders
    let audio = useRef();
    // start the audio (using the .current property of the ref we just created) when the component mounts using the useEffect hook
    useEffect(() => {
        audio.current = new Audio(waves)
        audio.current.play()
    }, [])
    // Stop the audio when the component unmounts
    // (not exactly what you asked re React Router, but similar idea)
    useEffect(() => {
        return () => {
            audio.current.pause()
            console.log("in cleanup")
        }
    }, [])
    ...

    return (
        <>
            ...
        </>
    )
}
export default RockyCoast;

之所以能够正常工作的一些关键原因是因为我们将audio变量声明为React ref，以便我们可以再次访问它以在卸载时暂停它。同样重要的是，两个useEffect调用的依赖项数组必须相同（在我的情况下，它们为空，以便它们像componentDidMount和componentWillUnmount那样起作用）。

问题是专门询问有关使用React Router更改路线的问题，因此您的具体情况可能需要做更多的工作，但是如果像我一样，您为我们需要此功能的路线渲染了一个父组件，例如这个：

<Route exact path="/habitat/rocky_coast">
    <RockyCoast />
</Route>

（在页面上播放音频，然后在导航到另一个页面时停止播放），此解决方案效果很好。

希望这对其他贫穷的开发人员有所帮助，像我一样，他们设法创建了一个项目，其中播放了大量音频剪辑，哈哈！

在React中停止路由更改的音频？

2 个答案: