React - これはコンストラクタでは未定義です

Question

私はいくつかの練習問題に対応して作業するのが新しいです。 YTSearchの内部でこれを使用しているとき、私はこれが定義されていないというメッセージを受け取ります。しかし、私が見ているチュートリアルインストラクターには同じコードがあり、彼のために働いています。助けてもらえますか？それがために、この仕事をする

constructor(props){ 
     super(props); 
     this.state = { 'videos' : []}; 
     YTSearch({ key: API_KEY, term: 'surfboards'}, function(data){ 
       console.log(data); 
       console.log(this); 
      }.bind(this) 
     ); 
    } 

をかarrow functionを使用します。

import React, { Component } from 'react'; 
import ReactDOM from 'react-dom' 
import YTSearch from 'youtube-api-search'; 

const API_KEY = "AIzaSyCDclF-xo-YjMt48H8WMsnebncKmU3jsQA"; 

class App extends Component { 
    constructor(props){ 
     super(props); 
     this.state = { 'videos' : []}; 
     YTSearch({ key: API_KEY, term: 'surfboards'}, function(data){ 
      console.log(data); 
      console.log(this); 
     }); 
    } 

    render(){ 
     return <input />; 
    } 
} 

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

Answer 1

そのコンテキストの問題は、このキーワードを使用するために、コールバックメソッドをbindのを忘れて、あなたはそれをバインドする必要があり、これを使用メソッドバインディングを心配する必要はありません。

 constructor(props){ 
      super(props); 
      this.state = { 'videos' : []}; 
      YTSearch({ key: API_KEY, term: 'surfboards'}, (data)=>{ 
        console.log(data); 
        console.log(this); 
      }); 
     }