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