Question

我不理解React应用程序中vanilla javascript和ES6之间的语法差异。我的第一个不起作用的代码是

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

this.state = {videos:[]};

YTSearch({key: API_KEY,term :'surfboards'},function(videos){
  this.setState({videos : videos});
});
}

这在控制台

中给出了'无法读取属性'setState'of undefined'错误

但将语法更改为

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

解决了这个问题。不是两回事（我可能错了）。使用

function(videos){}

和

(videos) => {}

我对javascript感到不舒服，所以感谢任何帮助。

Answer 1

这是由于this的约束方式。

使用箭头功能this仍然绑定到App类。

但是，当您使用function关键字this绑定到该函数时。

根据MDN

在箭头函数之前，每个新函数都定义了它自己的这个值。

使用function关键字，您可以采取两种方法。

首先，

YTSearch({key: API_KEY,term :'surfboards'}, function(videos){
  this.setState({
      videos : videos
   });
}.bind(this));

或者你可以这样做：

//assign this to new variable that to use when setting state
let that = this;

YTSearch({key: API_KEY,term :'surfboards'}, function(videos){
  that.setState({
      videos : videos
   });
});

Answer 2

这个指的是功能。我建议使用ES6箭头功能：

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

    this.state = {videos:[]};

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

因为箭头功能没有创建自己的 this ，所以使用了封闭执行上下文的 this 值。您还可以在变量（或绑定函数）中存储对 this 的引用：

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

    var _this = this;

    this.state = {videos:[]};

    YTSearch({key: API_KEY,term :'surfboards'}, function(videos){
      _this.setState({videos : videos});
    });
  }
}

在使用ES6语法的React中，setState函数是否未定义？

2 个答案: