親要素から子要素へデータを渡すことに反応します。

Question

App（親）コンポーネントで状態を配列に設定しました。データはOKです私はVideoList（子）コンポーネントにこれらのデータを渡すしようとすることは、それはいつものように空の文字列 インデックスJS

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import YTSearch from 'youtube-api-search'; 
import VideoList from './components/video_list'; 
import SearchBar from './components/search_bar'; 

const YOUTUBE_API_KEY = "AIzaSyCI9gcceui5zcQDAEwbyvL..."; 

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {videos:''} 
    YTSearch({key:YOUTUBE_API_KEY, term:'surfboards'}, (videos)=>{ 
     this.setState({videos:videos}) 
    }); 

    } 

    render(){ 
    return (
    <div> 
     <SearchBar /> 
     <VideoList videos = {this.state.videos} /> 
    </div> 
    ); 
    } 
} 
ReactDOM.render(<App />, document.querySelector('.container')); 

VideoList.js

import React, {Component} from 'react'; 
import VideoListItem from './video_list_item'; 

    const VideoList = (props) =>{ 
//I expect props as array but its empty string.. 
     const videoItems = props.videos.map((video) => { 
      return <VideoListItem video={video} /> 
     }) 
     return (
       <ul className="col-md-4 list-group"> 
        {videoItems} 
       </ul> 
      ); 
    } 
    export default VideoList; 

私が見ることができる午前を歓迎しています配列内の検索されたビデオ要素私の問題は、子コンポーネントに渡す程度であるので、

Answer 1

問題は、文字列にvideosを設定しているということです。

this.state = {videos:''} 

はそれにマッピングしようとしている：

const videoItems = props.videos.map((video) => { 
    return <VideoListItem video={video} /> 
}) 

これはおそらく、（あなたがそれを見るためにあなたのコンソールをチェックすることができるはず）エラーを投げていると、エラーがoccuringからさらにレンダリングを防ぐことができます。