Uncaught TypeError：无法读取未定义的属性“setState”

我收到以下错误

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

Answer 1

这是由于这个this.delta不受this约束。

为了绑定在构造函数中设置this.delta = this.delta.bind(this) ：

 constructor(props) { super(props); this.state = { count : 1 }; this.delta = this.delta.bind(this); } 

目前，你正在调用绑定。 但绑定返回一个绑定函数。 您需要将函数设置为其绑定值。

Answer 2

在ES7 + （ES2016）中，可以使用实验函数绑定语法 operator ::来绑定。 这是一个语法糖，并会像Davin Tryon的答案一样。

你可以重写this.delta = this.delta.bind(this); to this.delta = ::this.delta;

---

对于ES6 + （ES2015），您也可以使用ES6 + 箭头function （ => ）来使用this 。

 delta = () => { this.setState({ count : this.state.count + 1 }); } 

为什么？ 从Mozilla文档：

直到箭头function，每个新function定义自己的这个价值[…]。 这被certificate是一个面向对象的编程风格的烦人。

箭头函数捕获封闭上下文的这个值[…]

Answer 3

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> 

Answer 4

在React中使用ES6代码时，总是使用箭头函数，因为这个上下文是自动绑定的

用这个：

 (videos) => { this.setState({ videos: videos }); console.log(this.state.videos); }; 

代替：

 function(videos) { this.setState({ videos: videos }); console.log(this.state.videos); }; 

Answer 5

您需要将其绑定到构造函数，并记住对构造函数的更改需要重新启动服务器。 否则，您将以相同的错误结束。

Answer 6

虽然这个问题已经有了解决办法，但我只是想分享一下我的意见，希望能有所帮助：

 /* * The root cause is method doesn't in the App's context * so that it can't access other attributes of "this". * Below are few ways to define App's method property */ class App extends React.Component { constructor() { this.sayHi = 'hello'; // create method inside constructor, context = this this.method = ()=> { console.log(this.sayHi) }; // bind method1 in constructor into context 'this' this.method1 = this.method.bind(this) } // method1 was defined here method1() { console.log(this.sayHi); } // create method property by arrow function. I recommend this. method2 = () => { console.log(this.sayHi); } render() { //.... } }