React未捕获（承诺中）DOMException：play（）请求被新的加载请求中断

Question

我正尝试使用ReactJS为我的UI加载队列系统的视频。但是，当我设置状态来更改视频的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与反应

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 }; 
    }); 
    }