0
私は最初のReactアプリケーションを作成していますが、私はYoutube APIに問題があります。私は別のYoutube検索機能を書いています:youtube apiで検索クエリを実行するとエラーが発生する
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関数の構造と信じています。多分私はパラメータが不足しているでしょうか?