Question

我是初学者，使用webpack潜入ReactJS。在Udemy上学习自己的自由课程，但我无法弄清楚为什么我的代码不起作用，因为代码看起来与我所遵循的视频完全相同。

问题很简单，为什么视频详细信息文件无法正常呈现？

虽然我有5个组件文件，但我只会包含父index.js和子video_detail.js，因为我遇到的问题只是这两个文件。

index.js文件

＆＃13;

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 {
	constructor(props){
		super(props);
		//Do i expect this component to play any type of state? aka pass props
		this.state= { videos: []};
				  //  ^proper name can be anything
		YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
//	console.log(data);
		this.setState({ videos });
});		// this.setState({videos : vidoos});  
	}
	render (){
	return (
	<div>
		<SearchBar />
		<VideoDetail video={this.state.video[0]} />
		<VideoList videos={this.state.videos} /> 
            
	</div>
	 ); 
	}
}

ReactDOM.render(<App />, document.querySelector('.container'));

＆＃13;

video_detail.js文件

＆＃13;

import React from 'react';

const VideoDetail = ({video}) => {
	if (!video) {

		return<div>Loading...</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;

＆＃13;

其他信息：google stephen grider github，将弹出存储库，我正在使用ReduxSimpleStarter。这有助于回答我希望的上述问题！

Answer 1

这应该是视频[0]而不是视频[0]？

将<VideoDetail video={this.state.video[0]} />更改为

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

JSreact渲染问题

1 个答案: