JSreact子コンポーネントエラー

Question

新しいコードを追加してビデオからビデオへのボタンをクリックするまで、完全に正常に動作していたコードを編集しました。私はエラーを見つけることができませんし、端末もそれをピックアップしていません。

./video_list_item.jsがもう認識されない理由を教えてもらえますか？

添付ファイルは親ファイルと2つの子コンポーネントですが、合計コンポーネントが5つありますが、エラーは明らかに2つのうちの一方にしかありません。

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= { 
 
\t \t \t videos: [], 
 
\t \t \t selectedVideo:null 
 

 
\t \t }; 
 
\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:videos, 
 
\t \t \t selectedVideo: videos[0] 
 
\t \t }); 
 
\t }); \t \t // this.setState({videos : vidoos}); 
 
} 
 
\t render(){ 
 
\t return (
 
\t <div> 
 
\t \t <SearchBar /> 
 
\t \t <VideoDetail video={this.state.selectedVideo} /> 
 
\t \t <VideoList 
 
\t \t onVideoSelect={selectedVideo => this.setState({selectedVideo}) } 
 
\t \t videos={this.state.videos} /> 
 
      
 
\t </div> 
 
\t ); 
 
\t } 
 
} 
 

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

video_list.js

//video list file. JS.react 
 
import React from 'react'; 
 
import VideoListItem from './video_list_item'; 
 

 
const VideoList = (props) => { 
 
\t // \t \t \t \t ^props is made args here because videos var is passed 
 
\t // \t \t \t \t in index.js into VideoList function(with state). 
 
const videoItems = \t props.videos.map((video) => { 
 

 
\t \t return (
 
\t <VideoListItem 
 
\t \t onVideoSelect={props.onVideoSelect} 
 
\t \t key={video.etag} 
 
\t \t video ={video} /> 
 
\t \t); 
 
\t }); 
 
\t return (
 
\t \t <ul className="col-md-4 list-group"> 
 
\t \t {videoItems} 
 
\t \t </ul> 
 
\t); 
 
\t 
 
}; 
 

 
export default VideoList;

video_list.item.js

//video list item file. JS.react 
 
import React from 'react'; 
 

 
const VideoListItem = ({video, onVideoSelect}) => { 
 
\t const imageUrl = video.snippet.thumbnails.default.url; 
 
\t // can see this in console log 
 
\t return (
 
\t <li onClick={() => onVideoSelect{video} }className="list-group-item"> 
 
\t <div className ="video-list media"> 
 
\t \t <div className ="media-left"> 
 
\t \t <img className="media-object" src = {imageUrl}/> 
 

 
\t \t </div> 
 

 

 
\t \t <div className="media-body"> 
 

 
\t \t <div className="media-heading"> {video.snippet.title} </div> 
 
\t \t </div> 
 
\t </div> 
 
\t </li> 
 
\t); 
 
}; 
 

 
export default VideoListItem;

私はdevのツールで取得したエラーメッセージを投稿することができますが、それは文字通りただ一つのことを言います。これはエラーメッセージ=>モジュールを見つけることができません "./video_list_item"

また、ファイルがまったく移動されず、コードが編集され、エラーメッセージが作成されました。この質問に真摯に答えてくれてありがとうございました！

Answer 1

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

エラーが{video}が、実際にそう(video)のように括弧内にあるべきです。

正しいコードは次のとおりです。
<li onClick={() => onVideoSelect(video) }className="list-group-item">.

注：子コンポーネントは、いくつかの奇妙な理由で親によって認識されないので、{}はそれを作ります。答えに手伝ったすべての人に感謝します！