React类组件中_handleMapRegionChange的this绑定与ES6语法报错问题求助

第一类报错：TypeError: this.setState is not a function #

普通类方法_handleMapRegionChange没有和组件实例绑定固定的this指向，当这个方法作为地图组件的区域变更回调传递出去时，运行时的调用上下文会脱离当前组件实例，导致方法内部找不到属于组件实例的setState方法。

第二类报错：Parsing error: Unexpected token = #

类属性箭头函数的写法（即类内部直接用方法名 = 箭头函数的形式定义方法）属于JS类字段提案的语法，不是原生ES6标准语法。出现解析错误通常是三类原因：

• 项目的Babel转译配置、ESLint解析规则没有开启对该语法的支持
• 代码大括号层级不匹配、方法定义位置放错
• 定义方法时多写漏写标点符号

兼容写法（无需调整配置，适配所有项目环境） #

直接在类的构造函数中手动绑定方法的this指向，是最稳妥无依赖的方案：

constructor (props) {
  super(props)
  // 给方法绑定固定的this指向，永远指向当前组件实例
  this._handleMapRegionChange = this._handleMapRegionChange.bind(this)
  this.state = {
    mapRegion: null,
    hasLocationPermissions: false,
    locationResult: null
  }
}

绑定完成后，不管这个方法被传到哪里当回调使用，内部的this都能正确访问组件实例的属性和方法。

类属性箭头函数写法的修复 #

如果更习惯用类属性箭头函数的写法，不需要在构造函数里写bind，可以按如下顺序排查修复：

1. 检查大括号是否匹配：你贴的原始代码里render方法结束后多写了一个闭合大括号，这类括号不匹配的问题会直接触发解析错误。同时确认_handleMapRegionChange的定义位置：确保它和constructor、render、_getLocationAsync是同级的类内部方法，没有嵌套在其他方法里，也没有多写漏写标点符号。
2. 确认你代码里已经用同样写法定义的_getLocationAsync有没有报解析错误，如果它没报错，说明项目配置本身是支持类字段语法的，只要修正括号和位置问题就能正常运行。
3. 如果_getLocationAsync同样报解析错误，说明项目的解析配置不支持该语法：需要在Babel中启用类字段语法的转译插件，同时把ESLint的解析器换成支持类语法的解析规则，消除代码检查阶段的解析报错。

补充说明：类属性箭头函数的本质是在类实例构造时，把这个箭头函数作为实例自身的属性赋值，箭头函数本身没有自己的this，会自动继承定义时的上下文（也就是组件实例），所以天然不会出现this指向丢失的问题。

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