youtube apiで検索クエリを実行するとエラーが発生する

Question

私は最初のReactアプリケーションを作成していますが、私はYoutube APIに問題があります。私は別のYoutube検索機能を書いています：

var searchYouTube = (options, callback) => { 
    $.get('https://www.googleapis.com/youtube/v3/search', { 
    key: window.YOUTUBE_API_KEY, 
    q: options.query, 
    maxResults: options.max, 
    }).done(function(data) { 
    console.log(data); 
    callback(data); 
    }); 
}; 

window.searchYouTube = searchYouTube; 

検索入力に変更があるたびにトリガーされます。あなたは私のapp.jsxでこのコンポーネントを見ることができます：

class App extends React.Component { 
    constructor() { 
    super(); 
    this.state = { 
     videos: exampleVideoData, 
     currentVideo: exampleVideoData[0] 
    }; 
    } 

    renderSearch(term) { 
    console.log($(term.target).val()); 
    this.setState({ 
     videos: searchYouTube({query:$(term.target).val(),max:5}) 
    }); 
    } 

    setVideo(video) { 
    this.setState({ 
     currentVideo: video 
    }); 
    } 

    render() { 
    return (
     <div> 
     <nav className="navbar"> 
      <div className="col-md-6 offset-md-3"> 
      <div><Search renderSearch={this.renderSearch.bind(this)}/></div> 
      </div> 
     </nav> 
     <div className="row"> 
      <div className="col-md-7"> 
      <div><VideoPlayer currentVideo={this.state.currentVideo}/></div> 
      </div> 
      <div className="col-md-5"> 
      <div><VideoList videos={this.state.videos} setVideo={this.setVideo.bind(this)}/></div> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
} 

// In the ES6 spec, files are "modules" and do not share a top-level scope 
// `var` declarations will only exist globally where explicitly defined 
window.App = App; 

は最後に、私が得るエラーは以下のとおりです。

{ 
"error": { 
    "errors": [ 
    { 
    "domain": "global", 
    "reason": "required", 
    "message": "Required parameter: part", 
    "locationType": "parameter", 
    "location": "part" 
    } 
    ], 
    "code": 400, 
    "message": "Required parameter: part" 
} 
} 

私は再編成するために必要なもの上の任意の提案？私はsearchYoutube関数の構造と信じています。多分私はパラメータが不足しているでしょうか？

Answer 1

コンソールログがクリアされている：

"message": "Required parameter: part", 

はあなたのオプションでpartを追加しなければならないことを意味します。次のように追加することをお勧めします。

var searchYouTube = (options, callback) => { 
    $.get('https://www.googleapis.com/youtube/v3/search', { 
    key: window.YOUTUBE_API_KEY, 
    q: options.query, 
    part: 'snippet', // this one was missing 
    maxResults: options.max, 
    }).done(function(data) { 
    console.log(data); 
    callback(data); 
    }); 
}; 

これは動作します。心配しないでください！そしてデモは以下の通りです：

const { Component } = React; 
 

 
class SearchBar extends Component { 
 
    state = { term: '' }; 
 

 
    render() { 
 
    return (
 
     <div className="search-bar"> 
 
     <input 
 
      value={this.state.term} 
 
      onChange={event => this.onInputChange(event.target.value)} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 

 
    onInputChange = term => { 
 
    this.setState({ term }); 
 
    this.props.onSearchTermChange(term); 
 
    }; 
 
} 
 

 
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} /> 
 
     </div> 
 
     <div className="details"> 
 
     <div> 
 
      {video.snippet.title} 
 
     </div> 
 
     <div> 
 
      {video.snippet.description} 
 
     </div> 
 
     </div> 
 
    </div> 
 
); 
 
}; 
 

 
const VideoListItem = ({ video, onVideoSelect }) => { 
 
    const imageUrl = video.snippet.thumbnails.default.url; 
 

 
    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> 
 
); 
 
}; 
 

 
const VideoList = props => { 
 
    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> 
 
); 
 
}; 
 

 
const InvalidApiKey =() => (<h1>Sorry you do not give a valid YOUTUBE API key. Refresh the page or Run the snippet again and give a valid API key. </h1>) 
 

 

 
class App extends Component { 
 
    state = { 
 
    videos: [], 
 
    selectedVideo: null, 
 
    error: false 
 
    }; 
 
    componentDidMount() { 
 
    this.videoSearch('Sport'); 
 
    } 
 

 
    searchYouTube(options, callback) { 
 
    $.get('https://www.googleapis.com/youtube/v3/search', { 
 
     key: this.props.youtubeApiKey, 
 
     q: options.query, 
 
     part: 'snippet', 
 
     maxResults: options.max 
 
    }).done(function(data) { 
 
     callback(data); 
 
    }).fail(() => this.setState({error: true})) 
 
    } 
 
    videoSearch = (term) => { 
 
    this.searchYouTube({ key: this.props.youtubeApiKey, term: term }, data => { 
 
     this.setState({ 
 
     videos: data.items, 
 
     selectedVideo: data.items[1] 
 
     }); 
 
    }); 
 
    } 
 

 
    render() { 
 
    // const videoSearch = _.debounce(term => { 
 
    // this.videoSearch(term); 
 
    // }, 300); 
 
    if (this.state.error) return <InvalidApiKey /> 
 

 
    return (
 
     <div> 
 
     <SearchBar onSearchTermChange={this.videoSearch} /> 
 
     <VideoDetail video={this.state.selectedVideo} /> 
 
     <VideoList 
 
      onVideoSelect={selectedVideo => this.setState({ selectedVideo })} 
 
      videos={this.state.videos} 
 
     /> 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
const youtubeApiKey = prompt(
 
    'Give a valid YOUTUBE API KEY and everything should work: ' 
 
); 
 

 

 
ReactDOM.render(
 
    youtubeApiKey 
 
    ? <App youtubeApiKey={youtubeApiKey} /> 
 
    : <InvalidApiKey />, 
 
    document.querySelector('#app') 
 
);

.search-bar { 
 
    margin: 20px; 
 
    text-align: center; 
 
} 
 

 
.search-bar input { 
 
    width: 75%; 
 
} 
 

 
.video-item img { 
 
    max-width: 64px; 
 
} 
 

 
.video-detail .details { 
 
    margin-top: 10px; 
 
    padding: 10px; 
 
    border: 1px solid #ddd; 
 
    border-radius: 4px; 
 
} 
 

 
.list-group-item { 
 
    cursor: pointer; 
 
} 
 

 
.list-group-item:hover { 
 
    background-color: #eee; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 

 
<div id="app" />