类组件正在循环中重新呈现

Question

我正在尝试使用youtube-api-search构建一个简单的YouTube应用程序。该应用程序有两个主要部分，即。VideoDetail & VideoList.VideoDetail旨在显示/播放视频，而VideoList用于显示五个视频及其标题的列表。

现在，问题是，我的应用程序的顶部，即在循环中不断重新渲染。我不知道为什么会这样。我的应用程序非常简单，它甚至没有任何生命周期方法。请帮助我找出错误。

应用程序.js(它被导入到索引中.js它被呈现(

import React, { Component } from 'react';
import YTSearch from 'youtube-api-search';
import SearchBar from './components/search_bar';
import VideoList from './components/video_list';
import VideoDetail from './components/video_detail';
const API_KEY = 'AIzaSyC----key------N7khtCs';
class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      videos: [],
      selectedVideo: null
     };
     console.log('sth.');
    YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
      this.setState({
        videos: videos,
        selectedVideo: videos[0]
      });
    });
  }
  render(){
    return (
      <div>
        {console.log('indexx')}
        <VideoDetail video={this.state.selectedVideo} />
        <VideoList
          onVideoSelect={selectedVideo => this.setState({selectedVideo})}
          videos={this.state.videos}
        />
      </div>
    );
  };
}
export default App;              

video_detail.js

import React from 'react';
const VideoDetail = ({video}) => {    //accesssing props elements direcly
    if(!video){
        return <div>Loading Details</div>;
    }
    const videoId = video.id.videoId;
    const url = `https//www.youtube.com/embed/${videoId}`;
    return (
        <div className="video-detail col-md-8">
            <div className="embed-responsive embed-responsive-16by9">
                <iframe className="embed-responsive-item" src={url}></iframe>
            </div>
            <div className="details">
                <div>{video.snippet.title}</div>
                <div>{video.snippet.description}</div>
            </div>
        </div>
    );
};
export default VideoDetail;

video_list.js

import React from 'react';
import VideoListItem from './video_list_item';
const VideoList = props => {
    const videoItems = props.videos.map((video) => {
        console.log(video);
        return (
            <VideoListItem
                onVideoSelect={props.onVideoSelect}
                key={video.etag}
                video={video} />
            );
    });
    return (
        <ul className="col-md-4 list-group">
            {videoItems}
        </ul>
    );
};
export default VideoList;                

video_list_item.js

import React from 'react';
const VideoListItem = ({video, onVideoSelect}) => {    //pulling from props
    const imageUrl = video.snippet.thumbnails.default.url;
    return(
        <li onClick={() => onVideoSelect(video)} className="list-group-item">
            <div className="video-list media">
                <div className="media-left">
                    <img className="media-object" src={imageUrl} />
                </div>
                <div className="media-body">
                    <div className="media-heading">{video.snippet.title}</div>
                </div>
            </div>
        </li>
    );
}
export default VideoListItem;

有人，请解释一下这里的问题是什么。我想了解。

Answer 1

终于想通了问题：

我是因为:没有出现在网址中。

常量网址 = https://www.youtube.com/embed/${videoId} ;