Почему мой сайт отображается снова и снова?

Ознакомился с курсом udemy по реакции и сокращению по созданию простого видеоплеера, пока мой сайт не начал рендерить одну и ту же страницу более 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 содержит код страницы для загрузки компонента и ссылку на ускорение.

<!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>

Это очень приблизительное предположение, поскольку я не могу на самом деле решить проблему (стоит включить рабочий пример, если вы можете), но изображение выглядит так, как будто вы рекурсивно включаете ту же страницу в iframe. Опять же, серьезные догадки, но вам может потребоваться добавить http:// перед URL-адресом const url = www.youtube.com/embed/${videoId};, чтобы он был правильно связан.

— 25.10.2018 11:05

Если можете, предоставьте ссылку на github для своего проекта. Или, что еще лучше, вы можете клонировать свой проект на stackblitz (это отличный инструмент) и предоставить ссылку на рабочий пример.

— 25.10.2018 12:01

есть ли в вашем приложении несколько HTML-элементов с className как container

— 25.10.2018 13:46

@DBS Это произошло для решения проблемы. Спасибо за догадку?

— 25.10.2018 17:17

@Revansiddh Вовсе нет, редактирование переменной url в компоненте VideoDetail помогло решить проблему. Спасибо за попытку

— 25.10.2018 17:18

@AkshayMilmile github.com/ahebwa49/react-video-player.git Однако изменение переменной url в компоненте VideoDetail для включения https: // помогло решить проблему. Спасибо за попытку.

— 25.10.2018 17:21

javascript html reactjs bootstrap-4

25.10.2018 10:55

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Другие вопросы по теме

Выпадающий список и Javascript

Перетаскивание с помощью jquery (панель инструментов и окно отчета)

Выбрать дочерний элемент дочернего элемента при изменении атрибутов

Почему мое изображение границы не работает в IE11?

Фоновая прокрутка тела вверх при сворачивании навигационной панели на мобильных устройствах

Как вернуть вывод колбы на ту же html-страницу

Наведение указателя на дочерний вложенный элемент не должно влиять на родительский

CSS / Bootstrap - переместить текст в новую строку, если он превышает длину столбца

Почему мои файлы png обновляются в базе данных как pdf и как это исправить?

Нажмите кнопку, чтобы переключить позиции div

Почему мой сайт отображается снова и снова?

Другие вопросы по теме

Похожие вопросы