React中Uncaught TypeError: Cannot read property 'setState' of undefined

类定义的组件中的方法默认是不会绑定this的，所以为了方便地调用当前组件的其他成员方法或属性，通常需要将事件处理函数运行时的this指向当前组件实例：
绑定事件处理函数的this到当前组件，有如下几种方式

第一种，通过bind方法，原地绑定事件处理函数的this指向：
注意这一句，this.handleClick(this)

<div className='my-link'>
                    <a href='#' onClick={this.handleClick(this)}>clicked me {this.state.count}times.</a>
</div>

这种方式比较简单，但是每次render的时候都会执行bind方法生成一个新的函数，会有额外的开销，由于事件处理函数是作为属性传递的，所以从而导致子组件进行重新渲染。不推荐。

第二种，通过一个箭头函数将真实的事件处理函数包装一下

<div className='my-link'>
                    <a href='#' onClick={e => this.handleClick(e)}>clicked me {this.state.count}times.</a>
</div>

这种方式也没有解决第一种方式面临的性能开销和重新渲染的问题。但是这种方式的一个好处是能清晰描述事件处理函数接收的参数列表

第三种，在constructor中预先将所有的事件处理函数通过bind方法进行绑定

 <div className='my-link'>
                    <a href='#' onClick={this.handleClick}>clicked me {this.state.count}times.</a>
</div>  //这里正常调用
constructor(props){
               super(props);
               this.state={
                   count:0
               }
              //重点在这里
               this.handleClick=this.handleClick.bind(this);
}

这种方式能解决前面两种方式面临的额外开销和重新渲染的问题，但是写起来略微有点复杂，因为一个事件处理函数要分别在三个不同的地方进行定义，绑定this和使用

第四种，使用类的成员字段定义语法

 handleClick= (e) => {
               e.preventDefault();
               console.info('react click');
               this.setState(preState => ({ count: preState.count + 1 }));
}

这种方式解决了前面三种方式面临的性能开销、重新渲染以及书写麻烦的问题。
————————————————
版权声明：本文为CSDN博主「MandiGao」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41999617/article/details/84871861

React中Uncaught TypeError: Cannot read property 'setState' of undefined

推荐阅读更多精彩内容