反应 - 这在构造函数中是未定义的

Question

我是新手，可以做出反应并做一些练习。在 YTSearch 中，当我使用它时，我收到一条消息，指出这是未定义的。但是我正在查看的教程讲师具有相同的代码，并且对他有用。有人可以帮忙吗？

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'}, function(data){
              console.log(data);
              console.log(this);
           }.bind(this)
        );
    }

或者使用arrow function它会为你完成这项工作，你不需要担心方法绑定，使用这个：

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