我得到以下错误
无法读取undefined的属性“setState”
即使在构造函数中绑定了delta。
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = {
count : 1
};
this.delta.bind(this);
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
}
在ES7+ (ES2016)中，您可以使用实验函数绑定语法操作符::来绑定。这是一种语法糖，和Davin Tryon的答案一样。
然后你可以重写this.delta = this.delta.bind(this);到this.delta =::this.delta;
对于ES6+ (ES2015)，您还可以使用ES6+箭头函数(=>)来使用此功能。
delta = () => {
this.setState({
count : this.state.count + 1
});
}
为什么?来自Mozilla文档:
在箭头函数之前，每个新函数都定义了自己的this值[…]。对于面向对象风格的编程来说，这被证明是令人讨厌的。
箭头函数捕获封闭上下文的this值[…]
ES5和ES6类之间有上下文差异。所以，实现之间也会有一点不同。
以下是ES5版本:
var Counter = React.createClass({
getInitialState: function() { return { count : 1 }; },
delta: function() {
this.setState({
count : this.state.count++
});
},
render: function() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta}>+</button>
</div>
);
}
});
这是ES6版本:
class Counter extends React.Component {
constructor(props) {
super(props);
this.state = { count : 1 };
}
delta() {
this.setState({
count : this.state.count++
});
}
render() {
return (
<div>
<h1>{this.state.count}</h1>
<button onClick={this.delta.bind(this)}>+</button>
</div>
);
}
}
注意，除了类实现中的语法差异之外，事件处理程序绑定也存在差异。
在ES5版本中，它是
<button onClick={this.delta}>+</button>
在ES6版本中，它是:
<button onClick={this.delta.bind(this)}>+</button>
检查状态
检查状态是否创建特定属性
这一点。状态= {
名称:",
电子邮件:”“
｝
this.setState(() => ({
Comments: Comments //注释状态不可用
}))
2.检查(这个)
如果你在任何函数(即handleChange)中执行setState，检查函数是否绑定到这个函数或函数应该是箭头函数。
## 3种方法绑定到下面的函数##
//3 ways for binding this to the below function
handleNameChange(e) {
this.setState(() => ({ name }))
}
// 1.Bind while callling function
onChange={this.handleNameChange.bind(this)}
//2.make it as arrow function
handleNameChange((e)=> {
this.setState(() => ({ name }))
})
//3.Bind in constuctor
constructor(props) {
super(props)
this.state = {
name: "",
email: ""
}
this.handleNameChange = this.handleNameChange.bind(this)
}
这个问题有两种解决方案:
第一个解决方案是给你的组件添加一个构造函数，并像下面这样绑定你的函数:
constructor(props) {
super(props);
...
this.delta = this.delta.bind(this);
}
所以这样做:
this.delta = this.delta.bind(this);
而不是这样:
this.delta.bind(this);
第二个解决方案是使用箭头函数:
delta = () => {
this.setState({
count : this.state.count++
});
}
实际上箭头函数并不绑定它自己的这个。箭头函数在词法上绑定它们的上下文，因此这实际上引用了原始上下文。
有关bind函数的更多信息:
绑定函数
理解JavaScript Bind ()
有关箭头函数的更多信息:
Javascript ES6 -箭头函数和词汇这
