React Uncaught (in promise) DOMException: play() 请求被新的加载请求中断

Question

我正在尝试使用 ReactJS 为我的 UI 加载队列系统的视频。但是，当我 setState 更改视频的 url 时，我收到错误“未捕获（承诺中）DOMException：play() 请求被新的加载请求中断。”

这是我的代码：

class Videoplayer extends Component {
    constructor(props){
        super(props);
        this.state = {
            queue: ['fi4s9uwrg9']
        }
    }
    componentWillMount(){
        fetch(/api).then((res)=>{
            res.json().then((data)=>{
                let hashedqueue = [];
                data.forEach((vid)=>hashedqueue.push(vid.hashed_id));
                this.setState({
                    queue: hashedqueue
                })          
            })
        })
    }
    finishedPlaying(){
        let videos = this.state.queue;
        videos.shift();
        this.setState({queue:videos}) //this is the line thats causing the issue
    }

    render(){       
        return(
        <div className="videoplayer">
            <ReactPlayer ref={player => { this.player = player }} onEnded={()=>this.finishedPlaying()} url={'/videosource/'+this.state.queue[0]} playing />
        </div>
        )
    }
}

顺便说一句，hashedid 本质上是视频的 id

编辑：我正在使用这个包：https://www.npmjs.com/package/react-player 用于视频播放器，所以我可以将 wistia 与 react 一起使用

Answer 1

如果您需要访问状态来执行状态更新，请改用回调：

  finishedPlaying() {
    this.setState(prevState => {
      // make a shallow copy so as not to mutate state
      const videos = [...prevState.queue];
      videos.shift();
      return { queue: videos };
    });
  }