Question

我编辑的代码运行得非常好，直到我添加了新代码，使按钮点击从视频到视频的工作。我无法找到错误，终端也没有找到错误。

有人能告诉我为什么./video_list_item.js不再被识别了吗？

附件是父项和2个子组件，虽然我有5个组件，但错误肯定只在两个中的一个中。

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: [],
			selectedVideo:null

		};
				  //  ^proper name can be anything


		YTSearch({key: API_KEY, term: 'surfboards'}, (videos) => {
//	console.log(data);
		this.setState({ videos:videos,
			selectedVideo: videos[0]
		 });
	});		// this.setState({videos : vidoos});  
}
	render (){
	return (
	<div>
		<SearchBar />
		<VideoDetail video={this.state.selectedVideo} />
		<VideoList 
		onVideoSelect={selectedVideo => this.setState({selectedVideo})  }
		videos={this.state.videos} /> 
            
	</div>
	 ); 
	}
}

ReactDOM.render(<App />, document.querySelector('.container'));

＆＃13;

video_list.js

＆＃13;

//video list file. JS.react
import React from 'react';
import VideoListItem from './video_list_item';

const VideoList = (props) => {
	//				^props is made args here because videos var is passed
	//				in index.js into VideoList function(with state).
const videoItems =	props.videos.map((video) => {

		return (
	<VideoListItem 
		onVideoSelect={props.onVideoSelect}
		key={video.etag} 
		video ={video} />
		); 
	});
	return (
		<ul className="col-md-4 list-group">
		{videoItems}
		</ul>
	);
	
};

export default VideoList;

＆＃13;

video_list.item.js

＆＃13;

//video list item file. JS.react
import React from 'react'; 

const VideoListItem = ({video, onVideoSelect}) => {
	const imageUrl = video.snippet.thumbnails.default.url;
	// can see this in console log 
	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;

＆＃13;

我可以发布我在开发工具中收到的错误消息，但它实际上只是说了一件事。这是错误消息=＆gt;找不到模块＆＃34; ./ video_list_item＆＃34;

此外，根本没有文件被移动，代码被编辑并创建了错误消息。感谢任何真诚回答这个问题的人！

Answer 1

<li onClick={() => onVideoSelect{video} }className="list-group-item">

错误是{video}实际上应该在括号中(video)。

正确的代码是：
<li onClick={() => onVideoSelect(video) }className="list-group-item">.

注意：{}使得父组件无法识别子组件，因为某些奇怪的原因。感谢所有帮助回答的人！

JSreact子组件错误

1 个答案: