Question

在React和Redux上建立一个简单的视频播放器以加快速度，直到我的网站开始渲染同一页面超过10次，如下图所示。请帮助我们解决此问题。附件是我的各个组件的项目文件。 see picture

此文件包含应用程序（父）组件。

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>

为什么我的网站一遍又一遍地渲染？

0 个答案: