代码如下:

class test extends Component {
constructor(props) {
super(props);
this.state = {
liked: false
};
}
handleClick(event) {
this.setState({liked: !this.state.liked});
}
render() {
var text = this.state.liked ? '喜欢' : '不喜欢';
return (
<div onClick={this.handleClick}>
你<b>{text}</b>我。点我切换状态。
</div>
);
} }
export default test;

可以正常展示页面:

但是按钮一按就会报错。

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

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

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

constructor(props) {
super(props);
this.state = {
liked: false
};
}

改为

constructor(props) {
super(props);
this.state = {
liked: false
};
this.handleClick = this.handleClick.bind(this);//手动绑定
}

第二种解决办法是:将

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

改为

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

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

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

class App extends Component {
a() {
console.log(1)
} a = () => {
console.log(1)
}
}

第一个 a 不必说,是原型方法的定义。宽松模式下对应 ES5 就是

App.prototype.a = function() {}
第二个是 Stage 2 Public Class Fields 里面的写法,babel 下需要用 Class properties transform Plugin 进行转义。相当于:
class App extends Component {
constructor (...args) {
super(...args)
this.a = () => {
console.log(1)
}
}
}

为什么需要第二种写法?

在 React 里面,要将类的原型方法通过 props 传给子组件,传统写法需要 bind(this),否则方法执行时 this 会找不到:

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

或者

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

这种写法难看不说,还会对 React 组件的 shouldComponentUpdate 优化造成影响。

这是因为 React 提供了 shouldComponentUpdate 让开发者能够控制避免不必要的 render,还提供了在 shouldComponentUpdate 自动进行 Shallow Compare 的 React.PureComponent, 继承自 PureComponent 的组件只要 props 和 state 中的值不变,组件就不会重新 render。

然而如果用了 bind this,每次父组件渲染,传给子组件的 props.onClick 都会变,PureComponent 的 Shallow Compare 基本上就失效了,除非你手动实现 shouldComponentUpdate.

使用 Public Class Fields 的这种写法,就解决了这个问题。另外还有其他若干种办法,比如先定义原型方法,然后在 constructor 里面 bind 一遍;或者使用 decorator 进行 bind 等:

class A {
constructor() {
this.a = this.a.bind(this)
} a() {} // or
@bindthis
b() {}
}

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

var a = ()=>{
console.log(this)
}
//等同于
var a = function(){
console.log(this)
}.bind(this); a(); //Window
var b = function(){
console.log(this)
};
b(); //Window
var obj = { a,b };
obj.a(); //Window
obj.b(); //obj

箭头函数最大的作用是使得this从正常情况下的动态作用域(根据运行位置确定值)变成了静态作用域(根据定义位置确定值,也就是词法作用域)。
若想了解得更详细,可以去阅读官方文档: https://reactjs.org/docs/handling-events.html

react报错 TypeError: Cannot read property 'setState' of undefined的更多相关文章

  1. VUE.JS 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

    正常情况下在data里面都有做了定义 在函数里面进行赋值 这时候你运行时会发现,数据可以请求到,但是会报错 TypeError: Cannot set property 'listgroup' of ...

  2. Node中使用MySQL报错:TypeError: Cannot read property 'query' of undefined

    Node中使用MySQL报错: TypeError: Cannot read property 'query' of undefined at /Users/sipeng/Desktop/彭思/201 ...

  3. 使用webpack命令打包时,报错TypeError: Cannot read property 'presetToOptions' of undefined的解决办法

    我只安装了webpack,没有安装webpack-cli,第一次输入webpack打包时,提示 One CLI for webpack must be installed. These are rec ...

  4. vue表单校验提交报错TypeError: Cannot read property 'validate' of undefined

    TypeError: Cannot read property 'validate' of undefined at VueComponent.submitForm (plat_users.html: ...

  5. vue报错TypeError: Cannot read property 'protocol' of undefined

    错误信息如下所示: isURLSameOrigin.js?3934:57 Uncaught (in promise) TypeError: Cannot read property 'protocol ...

  6. vue报错TypeError: Cannot read property '$createElement' of undefined

    报错截图: 这个错误就是路由上的component写成了components

  7. Node.js报错TypeError: Cannot read property 'isDirectory' of undefined

    截图如下: 原因如下:记住"./uploads" 后要加一个/ fs.stat("./uploads/" + files[i], function(err, s ...

  8. VUE - 使用axios数据请求时数据绑定时 报错 TypeError: Cannot set property 'xxxx' of undefined 的解决办法

     created() {     var that=this     axios.get('http://jsonplaceholder.typicode.com/todos')     .then( ...

  9. JS报错:Cannot read property 'type' of undefined

    在做图片上传功能的时候,遇到了JS无法识别图片type的问题,在使用过程中是没有问题的,但是不知道为什么浏览器的Console报这个错误: Uncaught TypeError: Cannot rea ...

随机推荐

  1. Android 自定义事件监听器

    当我们自定义View的时候,如果需要返回值,那么就需要自定义一个监听器. 这里用一个自定义的数字选框为例. 首先定义view. 1.新建view,NumberKeyboardView.Java,自定义 ...

  2. Android 使用版本控制工具时添加忽略文件方式

    一.使用SVN管理项目时,添加忽略文件的方式 Android Studio 配合SVN时,添加忽略文件相对简单,首先打开项目的Settings选项,切换到Version Control下的Ignore ...

  3. echart所有汉字都显示中文,就echarts的toolbox注释显示乱码

    echarts无所谓支不支持gbk编码这么一说,关键是页面的charset和echarts.js文件的charset是否匹配,如果不匹配,请使用如下方式引入: <script src=" ...

  4. iOS CoreData (1)

    下面开始学习一下CoreData. Core Data不是一个关系型数据库,也不是关系型数据库管理系统(RDBMS). Core Data 为数据变更管理.对象存储.对象读取恢复的功能提供了支持. 它 ...

  5. Android 图片加载框架Glide4.0源码完全解析(一)

    写在之前 上一篇博文写的是Picasso基本使用和源码完全解析,Picasso的源码阅读起来还是很顺畅的,然后就想到Glide框架,网上大家也都推荐使用这个框架用来加载图片,正好我目前的写作目标也是分 ...

  6. BZOJ_1486_[HNOI2009]最小圈_01分数规划

    BZOJ_1486_[HNOI2009]最小圈_01分数规划 Description Input Output Sample Input 4 5 1 2 5 2 3 5 3 1 5 2 4 3 4 1 ...

  7. python爬虫 | 一条高效的学习路径

    数据是创造和决策的原材料,高质量的数据都价值不菲.而利用爬虫,我们可以获取大量的价值数据,经分析可以发挥巨大的价值,比如: 豆瓣.知乎:爬取优质答案,筛选出各话题下热门内容,探索用户的舆论导向. 淘宝 ...

  8. .NetCore 下开发独立的(RPL)含有界面的组件包 (三)构建界面

    .NetCore 下开发独立的(RPL)含有界面的组件包 (一)准备工作 .NetCore 下开发独立的(RPL)含有界面的组件包 (二)扩展中间件及服 务 .NetCore 下开发独立的(RPL)含 ...

  9. C#基础_循环

    1,三元运算符 表达式1?表达式2:表达式3 栗子1:bool result=5>3?true:false; 栗子2: int num=5>3?1:0; 注意事项以及相应规则: 2, 3, ...

  10. az nginx install and other

    Nginx     1◆ nginx install 源码:https://trac.nginx.org/nginx/browser   官网:http://www.nginx.org/       ...