Перейти к следующему видео из Youtube API (React)

Question

Я пытаюсь воспроизвести следующее видео на канале сразу после другого.В настоящее время на сайте есть видеоролики, показывающие одно за другим, но моя цель - показать одно видео, а второе воспроизводить сразу после того, как другое будет сделано.У меня настроена функция окончания видео, но сейчас она просто вызывает предупреждение.Я использую API данных Youtube для извлечения видео и их информации.

Вот фрагмент кода, который я использую:

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

Answer 1

Я предлагаю вам сделать несколько вещей немного по-другому.

Сначала сохраните переменную results.json(); в видео в состоянии, а не весь компонент YouTube, это плохая практика.

Затем сохраните другую переменную в вашем состоянии, которая указывает текущий идентификатор воспроизводимого видео (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}
            />
        );
}