Javascript 从Youtube API切换到下一个视频（React）

我正试图让一个频道的下一个视频紧接着另一个频道播放。目前，该网站有视频显示一个接一个，但我的目标是显示一个视频，第二个视频播放后，其他完成。我已经为视频结束设置了功能，但现在它只会引起警报。我正在使用Youtube数据API获取视频及其信息

以下是我正在使用的代码片段：

constructor() {
super();
this.state = {
  videos: [],
};

}

  componentDidMount() {
fetch('https://www.googleapis.com/youtube/v3/search?key='APIKey'&channelId=UCXIJgqnII2ZOINSWNOGFThA&part=snippet,id&order=date&maxResults=2')
.then(results => {
  return results.json();
}).then(data => {
  let videos = data.items.map((videos) => {
    return(
      <div key={videos.items}>
      <YouTube
              className="player"
              id="video"
              videoId={videos.id.videoId}
              opts={VIDEO_OPTS}
              onEnd={this.playNextVideo}
            />
      <h2>{videos.snippet.title}</h2>
      <p className="channel">Video by: {videos.snippet.channelTitle}</p>
      </div>
    );
  });
  this.setState({videos: videos});
  console.log("state", this.state.videos);
})

  }

  playNextVideo = () => {
    alert('The video is done!');
  }

constructor（）{
超级（）；
此.state={
视频：[]，
};
}
componentDidMount（）{
取（'https://www.googleapis.com/youtube/v3/search?key='APIKey'&channelId=ucxijggqnii2zoinswnogftha&part=snippet，id&order=date&maxResults=2'）
。然后（结果=>{
返回results.json（）；
})。然后（数据=>{
让视频=data.items.map（（视频）=>{
返回(
{videos.snippet.title}
视频作者：{videos.snippet.channelTitle}

);
});
this.setState（{videos:videos}）；
console.log（“state”，this.state.videos）；
})
}
playNextVideo=（）=>{
警报（“视频已完成！”）；
}

我建议你做一些稍微不同的事情

首先保存

results.json（）

在状态中添加到视频变量，而不是整个youtube组件，这是错误的做法

其次，在您的状态中保存另一个变量，该变量指示当前正在播放的视频id（playingVideoId）。在componentDidMount中初始化它，并在playNextVideo函数中更改它，如下所示：

constructor() {
    super();
    this.index=0;    
}        

componentDidMount() {
        fetch('https://www.googleapis.com/youtube/v3/search?key='APIKey'&channelId=UCXIJgqnII2ZOINSWNOGFThA&part=snippet,id&order=date&maxResults=2').then(results => {
          this.setState({videos: results.json()});
          this.setState({playingVideoId: this.state.videos[this.index]});
        })}

playNextVideo = () => {
              this.setState({playingVideoId: this.state.videos[++this.index]});         
          }

现在使用“渲染”功能渲染组件

render() {
    return(
          <YouTube
                  className="player"
                  id="video"
                  videoId={this.state.playingVideoId}
                  opts={VIDEO_OPTS}
                  onEnd={this.playNextVideo}
            />
        );
}

render（）{
返回(
);
}

非常感谢您的回复。当我编译网站时，它说TypeError:cannotreadproperty'playingVideoId'为null。嘿，马克，我没有写完整的代码。我只是想用一个例子来解释这个想法，所以不要照原样理解代码。我的猜测是检查这行this.state.videos[this.index]}）是否返回您期望的结果。