JSreact渲染問題

Question

我是一個初學者編碼者，可以通過webpack深入到ReactJS中。在我自己的Udemy自由課程上，但我無法弄清楚爲什麼我的代碼無法正常工作，因爲代碼看起來跟隨後的視頻完全一樣。

問題簡單的是，爲什麼視頻細節文件不能正確呈現？

儘管我有5個組件文件，但我只包含父級index.js和子級video_detail.js，因爲我遇到的問題僅限於這兩個文件。

index.js文件

import React, {Component } from 'react'; 
 
import ReactDOM from 'react-dom'; 
 
import YTSearch from 'youtube-api-search'; 
 
import SearchBar from './components/searchbar'; 
 
import VideoList from './components/video_list'; 
 
import VideoDetail from './components/video_detail'; 
 
const API_KEY = 'AIzaSyAi1CzVpifuFUDVQf3dzrTu3mwJDP2n8r8'; 
 

 
class App extends Component { 
 
\t constructor(props){ 
 
\t \t super(props); 
 
\t \t //Do i expect this component to play any type of state? aka pass props 
 
\t \t this.state= { videos: []}; 
 
\t \t \t \t // ^proper name can be anything 
 
\t \t YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => { 
 
// \t console.log(data); 
 
\t \t this.setState({ videos }); 
 
}); \t \t // this.setState({videos : vidoos}); 
 
\t } 
 
\t render(){ 
 
\t return (
 
\t <div> 
 
\t \t <SearchBar /> 
 
\t \t <VideoDetail video={this.state.video[0]} /> 
 
\t \t <VideoList videos={this.state.videos} /> 
 
      
 
\t </div> 
 
\t ); 
 
\t } 
 
} 
 

 
ReactDOM.render(<App />, document.querySelector('.container'));

video_detail.js文件

import React from 'react'; 
 

 
const VideoDetail = ({video}) => { 
 
\t if (!video) { 
 

 
\t \t return<div>Loading...</div>; 
 
\t } 
 

 

 
\t const videoId = video.id.videoId; 
 
\t const url = `https://www.youtube.com/embed/${videoId}`; 
 

 
\t return(
 
\t \t <div className="video-detail col-md-8"> 
 
\t \t \t <div className="embed-responsive embed-responsive-16by9"> 
 
\t \t \t \t <iframe className="embed-responsive-item" src={url}> </iframe> 
 
\t \t \t </div> 
 
\t \t <div className="details"> 
 
\t \t <div>{video.snippet.title}</div> 
 
\t \t <div>{video.snippet.description}</div> 
 
\t \t </div> 
 
\t </div> 
 
\t); 
 
}; 
 
export default VideoDetail;

附加信息：谷歌斯蒂芬grider的github和庫會彈出，我使用ReduxSimpleStarter 。這將有助於回答我希望的上述問題！

Answer 1

這應該是視頻[0]而不是視頻[0]？

變化<VideoDetail video={this.state.video[0]} />到

<VideoDetail video={this.state.videos[0]} />