Question

我正在尝试使用ReactJS为我的UI加载带队列系统的视频。但是当我在setState中更改视频的url时，我得到错误＆＃34; Uncaught（在promise中）DOMException：play（）请求被新的加载请求中断。＆＃34;

这是我的代码：

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

顺便说一下，哈希德基本上就是视频的内容

编辑：我正在使用此程序包：https://www.npmjs.com/package/react-player用于视频播放器，因此我可以使用wistia with 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 };
    });
  }

React Uncaught（在promise中）DOMException：play（）请求被新的加载请求中断

1 个答案: