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