arrow関数の構文エラー

Question

Reactアプリケーションをレンダリングする次のコードがあります。

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

const API_KEY = 'AIzaSyCF7K58Xwpr7m5C0yGy8Bck02iQ0fJ2yuI'; 


class App extends React.Component { 

    constructor(props){ 

    super(props); 

    this.state = {videos: []}; 

    this.YTSearch = this.YTSearch.bind(this); 
    } 

    YTSearch({key: API_KEY, term: BMW}, (videos => { 
    this.setState({ videos }); 
    }); 
); 

    render() { 
    return (
     <div> 
     <SearchBar /> 
     <VideoList videos={ this.state.videos }/> 
     </div> 
    ); 
    } 
} 


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

また、私はsetState関数の使用にいくつかの構文問題があると思います。

助けてもらえますか？ありがとうございました。

Answer 1

Class本文は、関数と変数を定義するためのものですが、クラス本体内で関数YTSearchを呼び出すと、構文エラーが発生します。関数を呼び出すにしたい場合は、

constructor(props){ 
    super(props); 
    this.state = {videos: []}; 
    } 

componentDidMount(){ 
    // Call it here inside componentDidMount or any other function 
    YTSearch({key: API_KEY, term: BMW}, (videos => { 
     this.setState({ videos }); 
    })); 
} 

Answer 2

あなたの構造化されたsetStateは大丈夫です。矢印の機能に引数が1つしかないので、それを閉じるか、どちらかの方法で取り除かなければならない括弧(があります。

Answer 3

componentDidMountなどのように、コンストラクタ内や他の関数内で呼び出すあなたの特定の問題は、あなたの質問に明らかにしたが、あなたのコードを見てから、私はあなたのYTSearchがあると想定されていませんかあなたの状態は決してビデオのリストで設定されることはありません。

検索をトリガする検索バーに渡す方法を作成しようとすると、おそらくこのようなものを試してみてください。私はこれが助けて欲しい！

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

const API_KEY = 'AIzaSyCF7K58Xwpr7m5C0yGy8Bck02iQ0fJ2yuI'; 

class App extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { videos: [] }; 

    this.search = this.search.bind(this); 
    } 

    search(phrase) { 
    YTSearch({ key: API_KEY, term: phrase }, videos => { 
     this.setState({ videos }); 
    }); 
    } 

    render() { 
    return (
     <div> 
     <SearchBar onSearch={this.search}/> 
     <VideoList videos={this.state.videos} /> 
     </div> 
    ); 
    } 
} 

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