我收到以下错误
未捕获的TypeError:无法读取未定义的属性'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>
);
}
}
11 回答
你不必绑定任何东西,只需使用这样的箭头函数:
虽然这个问题已经有了解决方案,但我只想分享我的解决方案,希望它可以帮助:
在 ES7+ (ES2016)中,您可以使用实验function bind syntax运算符
::
进行绑定 . 这是一个语法糖,将与Davin Tryon的答案一样 .然后,您可以将
this.delta = this.delta.bind(this);
重写为 this.delta = ::this.delta;对于 ES6+ (ES2015),您也可以使用ES6 arrow function(
=>
)来使用this
.为什么?来自Mozilla文档:
这是因为
this.delta
没有绑定到this
.为了在构造函数中绑定set
this.delta = this.delta.bind(this)
:目前,您正在调用bind . 但是bind返回一个绑定函数 . 您需要将函数设置为其绑定值 .
您必须使用'this'(默认对象)绑定方法 . 所以无论你的函数是什么,只需在构造函数中绑定它 .
您必须使用 this 关键字绑定新事件,如下所述...
您需要将其绑定到构造函数并记住对构造函数的更改需要重新启动服务器 . 否则,您将以相同的错误结束 .
在React中使用ES6代码时,始终使用箭头函数,因为 this 上下文会自动与其绑定
Use this:
instead of:
您还可以使用:
要么:
如果你传递一些参数..
ES5和ES6课程之间存在差异 . 因此,实现之间也会有一点差异 .
这是ES5版本:
这是ES6版本:
请注意,除了类实现中的语法差异外,事件处理程序绑定还存在差异 .
在ES5版本中,它是
在ES6版本中,它是: