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

我不理解React应用程序中香草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”

但是将语法更改为

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

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

及

---

我对javascript不太熟悉，因此非常感谢您的帮助。

这是因为

这个

是如何绑定的

使用箭头功能时，此仍绑定到您的

应用程序

类

但是，当您使用

函数

关键字

时，此

绑定到该函数

根据MDN

在arrow函数之前，每个新函数都定义了自己的此值

使用

函数

关键字可以采取两种方法

首先,

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

---

这是由于该是如何绑定的

使用箭头功能时，此仍绑定到您的

应用程序

类

但是，当您使用

函数

关键字

时，此

绑定到该函数

根据MDN

在arrow函数之前，每个新函数都定义了自己的此值

使用

函数

关键字可以采取两种方法

首先,

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

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

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

    this.state = {videos:[]};

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

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

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

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

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

    this.state = {videos:[]};

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

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

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

---

可能重复的可能重复的如果你不介意的话，你能展示一下我将如何使用function关键字来写上面的代码吗？请看更新的答案，这是你想要的吗？完成。很抱歉在此发布新消息。如果你不介意的话，请你展示一下我将如何使用函数关键字编写上述代码。@Buttersnips查看更新的答案，这是你想要的吗？完成。很抱歉在此发布新消息。