Быть в курсе с помощью курса удэми по реакции и избыточности при создании простого видеоплеера, пока мой сайт не начал рендерить одну и ту же страницу более 10 раз, как в цикле, как показано ниже.Пожалуйста, помогите нам решить эту проблему.Прилагаются файлы моего проекта для различных компонентов. см. Рисунок
Этот файл содержит компонент приложения (родительский).
import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import SearchBar from './components/search_bar';
import YTSearch from 'youtube-api-search';
import VideoList from './components/video_list';
import VideoDetail from './components/video_detail';
const API_KEY = 'AIzaSyCAfItybV7pSzxmwTj5wyG5SErMs5HYlRQ';
class App extends Component{
constructor(props){
super(props);
this.state = {videos: []};
YTSearch({key: API_KEY, term: 'internet of things'}, (videos) => {
this.setState({videos});
});
}
render() {
return (
<div>
<SearchBar />
<VideoDetail video={this.state.videos[0]} />
<VideoList videos={this.state.videos} />
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('.container'));
В файле video_detail.js есть код для компонента VideoDetail
import React from 'react';
const VideoDetail = ({video}) =>{
if (!video){
return <div>Loading...</div>;
}
const videoId = video.id.videoId;
const url = `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_item.js содержит код для компонента VideoListItem
import React from 'react';
const VideoListItem = ({video}) =>{
const imgUrl = video.snippet.thumbnails.default.url;
return(
<li className = "list-group-item">
<div className ="video-list media" >
<div className ="media-left">
<img className = "media-object" src = {imgUrl}/>
</div>
<div className = "media-body">
<div className = "media-heading">{video.snippet.title}</div>
</div>
</div>
</li>
)
}
export default VideoListItem;
video_list.js содержит код для компонента VideoList, как показано ниже
import React from 'react';
import VideoListItem from './video_list_item';
const VideoList = (props) => {
const videoItems = props.videos.map((video) => {
return <VideoListItem video = {video} key = {video.etag} />;
});
return(
<ul className="col-md-4 list-group">
{videoItems}
</ul>
);
}
export default VideoList;
search_bar.js содержит код для компонента SearchBar, который я еще не подключил.
import React, {Component} from 'react';
class SearchBar extends Component{
constructor(props) {
super(props);
this.state = {term: ''};
}
render(){
return(
<div>
<input />
</div>
);
}
};
export default SearchBar;
index.html содержит код страницы для загрузки компонента и ссылку на boostrap
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAq06l5RUVfib62IYRQacLc-KAy0XIWAVs"></script>
</head>
<body>
<div class="container"></div>
</body>
<script src="/bundle.js"></script>
</html>