React Uncaught（約束しています）DOMException：新しいロード要求によってplay（）要求が中断されました

Question

私のUIにReactJSを使用してキューシステムでビデオをロードしようとしています。しかし、ビデオのURLを変更するためにsetStateを実行すると、「Uncaught（約束事）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 }; 
    }); 
    } 

を