Reagieren - das ist undefiniert im Konstruktor

Question

Ich bin neu zu reagieren und an einigen Übungen zu arbeiten. Innerhalb von YTSearch, wenn ich dies benutze, bekomme ich eine Nachricht, dass dies nicht definiert ist. Aber der Tutorial-Lehrer, den ich sehe, hat den gleichen Code und es funktioniert für ihn. Kann jemand helfen?

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

Es ist ein Zusammenhang Problem, vergessen Sie die Callback-Methode bind, dieses Schlüsselwort zu verwenden, müssen Sie es binden, verwenden Sie diese:

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

oder arrow function verwenden es wird diesen Job für Sie müssen sich keine Gedanken über Methodenbindung machen, verwenden Sie diese:

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