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

Posted 2023-02-25

【中文标题】React Uncaught (in promise) DOMException: play() 请求被新的加载请求中断

【英文标题】：React Uncaught (in promise) DOMException: The play() request was interrupted by a new load request

【发布时间】：2017-07-28 19:26:40

【问题描述】：

我正在尝试使用 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 一起使用

【参考方案1】：

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

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

【讨论】：

这仍然给我同样的错误，但在队列中向前跳转了两个视频。也许是因为你有两个变量，let 和 const 视频。

很好，忘了删除setState上方的那些行。

嗯，现在这会在第一个视频结束时转到第二个视频，但不会转到第三个（或之后的任何视频）。似乎道具 onEnd 没有被再次调用