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);
            });
        }

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

1 个答案: