我正在使用youtube数据API v3

Question

我能够从youtube数据API提取视频，但是我想实现的是，我是视频组件，并且我有一个视频组件。视频组件是我从youtube数据API映射过来的视频中很少的一个，我想要的是，如果用户单击特定视频，则应在视频组件中播放。下面是到目前为止的代码。

import React from 'react';

const url = 'https://www.googleapis.com/youtube/v3/playlistItems';
const key = 'xxxxx';
const playlistId = 'xxxxx';

const finalUrl = `${url}?part=snippet&playlistId=${playlistId}&key=${key}`;

class Youtube extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      video: null,
      videos: null,
    }
    this.playVideo = this.playVideo.bind(this);
  }
  componentDidMount() {
    const getData = () => {
      return fetch(finalUrl)
        .then((data) => data.json())
        .then((dataJson) => {
          console.log(dataJson);
          const videos = dataJson.items.map(item => 
            <div onClick={this.playVideo} key={item.etag} className="col l4 s12 m6 videos">
              <img src={item.snippet.thumbnails.default.url} 
              alt="videos" />
              <h4>{item.snippet.title}</h4>
            </div>
          )
          this.setState(() => {
            return {
              video: <iframe title="main-video" width="560" height="315" frameBorder="0" src={`https://www.youtube.com/embed/${dataJson.items[0].snippet.resourceId.videoId}`} allowFullScreen></iframe>,
              videos: videos
            }
          })  
      })
        .catch((error) => {
          console.log(error);
        });
    }
      getData();
  }
  playVideo() {
    this.setState(() => {
      return {
        video: <iframe title="main-video" width="560" height="315" frameBorder="0" src={ url } allowFullScreen></iframe>,
      }
    })
  }
  render() {
    return (
      <div>
        <div className="container center-align">
          <div className="row">
            {this.state.video}
          </div>
          <div className="row">
            {this.state.videos}
          </div>
        </div>
      </div>
    )
  }
}

export default Youtube;

我知道我编写的代码并不是编写react组件的最佳方法。我正在努力改善它。任何帮助将不胜感激。