React报Property 'this' cannot be defined：MERN栈导航栏汉堡功能this指向问题

• 报错本质为类组件普通方法的this指向丢失，和setState本身的实现逻辑无关。
• 采用普通函数语法定义的类方法，默认不会自动绑定到当前类组件实例。当你将drawerToggleClickHandler作为prop传递给子组件NavigationBar时，方法脱离了类实例的直接调用上下文，内部的this会变为undefined，执行到this.setState时就会抛出属性读取错误。

不需要照搬教程的箭头函数实现，可通过两种原生JS兼容的标准方式解决绑定问题：

1. 在类组件构造函数中手动绑定方法this指向
   给App类补充构造函数逻辑，在组件初始化阶段将方法的this永久绑定到组件实例：

   constructor(props) {
     super(props);
     // 固定方法的this指向当前组件实例
     this.drawerToggleClickHandler = this.drawerToggleClickHandler.bind(this);
   }
   

   完成绑定后，无论方法在哪个位置被调用，内部的this都会稳定指向App组件实例，可正常访问setState。

2. 传递prop时内联绑定this
   无需新增构造函数逻辑，直接在向子组件传值的位置完成绑定：

   <NavigationBar
     drawerClickHandler={this.drawerToggleClickHandler.bind(this)}
   />
   

   该写法会在组件每次渲染时，生成一个绑定了正确this的方法实例传给子组件，可正常触发导航栏交互逻辑。

你当前编写的函数式setState逻辑本身完全符合React规范：接收前序state作为参数、返回新状态对象的实现没有语法或逻辑错误，只要修正this指向问题，汉堡菜单的开合状态就可以正常切换。

内容的提问来源于stack exchange，提问作者OmegaBlastoise