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

时间:2017-08-16 20:35:46

标签: javascript reactjs ecmascript-6

我不理解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感到不舒服,所以感谢任何帮助。

2 个答案:

答案 0 :(得分:4)

这是由于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
   });
});

答案 1 :(得分: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});
    });
  }
}