Question

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

现在，问题是，我的应用程序的顶部部分即。在循环中连续重新渲染。我无法弄清楚为什么会这样。我的应用程序非常简单，它甚至没有任何生命周期方法。请帮我弄清楚错误。

App.js（它被导入到index.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

最后找出了问题：

我原因是网址中没有import * as express from "express"; const app = express(); app.get('/', (req, res) => { res.send('Hello Typescript!') }); const server = app.listen(3000, () => { console.log("listening on port 3000") })。

const url = :;

类组件在循环中重新渲染

1 个答案: