react报错 TypeError: Cannot read property 'setState' of undefined

代码如下：

1.  
   class test extends Component {
2.  
   constructor(props) {
3.  
   super(props);
4.  
   this.state = {
5.  
   liked: false
6.  
   };
7.  
   }
8.  
   handleClick(event) {
9.  
   this.setState({liked: !this.state.liked});
10.  
    }
11.  
    render() {
12.  
    var text = this.state.liked ? '喜欢' : '不喜欢';
13.  
    return (
14.  
    <div onClick={this.handleClick}>
15.  
    你<b>{text}</b>我。点我切换状态。
16.  
    </div>
17.  
    );
18.  
    }
19.  
     
20.  
    }
21.  
    export default test;

可以正常展示页面：

但是按钮一按就会报错。

为什么会出现这种情况呢？

因为点击按钮时，到了handleClick()方法中的this已经不是组件里的this了。

第一种解决方法是：手动绑定this。将

1.  
   constructor(props) {
2.  
   super(props);
3.  
   this.state = {
4.  
   liked: false
5.  
   };
6.  
   }

改为

1.  
   constructor(props) {
2.  
   super(props);
3.  
   this.state = {
4.  
   liked: false
5.  
   };
6.  
   this.handleClick = this.handleClick.bind(this);//手动绑定
7.  
   }

第二种解决办法是：将

1.  
   handleClick(event) {
2.  
   this.setState({liked: !this.state.liked});
3.  
   }

改为

1.  
   handleClick= (e) => {
2.  
   this.setState({liked: !this.state.liked});
3.  
   }

这种解决方法之所以能解决问题，就引申到了另外一个问题：函数作为React组件的方法时, 箭头函数和普通函数的区别是什么？

举个例子：下面2个a的定义有什么区别？

1.  
   class App extends Component {
2.  
   a() {
3.  
   console.log(1)
4.  
   }
5.  
    
6.  
   a = () => {
7.  
   console.log(1)
8.  
   }
9.  
   }

App.prototype.a = function() {}

<button onClick={this.handleClick.bind(this)}></button>

<button onClick={(e) => this.handleClick(e)}></button>

而箭头函数除了代码少。与普通函数最大的不同就是：this是由声明该函数时候定义的，一般是隐性定义为声明该函数时的作用域this。