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

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

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

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

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

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是一个面向对象的编程风格的烦人。

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

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> 

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

用这个:

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

代替:

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

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

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

 /* * 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() { //.... } }