antd EditableTable实现选择器联动遇编译、setState报错如何解决

实现背景 #

计划基于React与Antd实现EditableTable可编辑表格组件，演示版本核心包含两列：当「country（国家）」选择器选中值变更时，「city（城市）」选择器的下拉选项需根据当前选中的国家值同步更新。开发调试过程中遇到两个阻塞问题，对应解决方案如下： #

问题1：Codesandbox平台Form.create()泛型写法编译异常 #

本地运行正常的组件导出代码在Codesandbox触发编译错误，原代码如下：

export default Form.create<EditableTableProps>()(Association);

问题原因 #

Codesandbox默认的TypeScript/Babel编译配置与本地开发环境存在差异，Antd v3版本Form.create()高阶组件的泛型类型声明，在平台默认未开启装饰器相关配置的场景下无法被正确解析，导致编译流程中断。

修复方案 #

直接移除泛型声明即可通过平台编译，不影响组件实际运行逻辑，修改后代码：

export default Form.create()(Association);

如果需要保留TypeScript类型校验，可在Codesandbox项目的tsconfig.json中开启experimentalDecorators配置项，或直接将组件文件后缀改为.jsx跳过TS类型检查。

问题2：setCityList方法调用时提示组件实例不存在setState方法 #

子组件中调用setCityList方法更新城市下拉列表时，控制台抛出实例不存在setState的错误，原代码如下：

setCityList(list: CityCode[]) {
    console.log(list);
    this.setState({cityList: list});
    console.log("cityList");
}

问题原因 #

属于React类组件典型的this指向丢失问题：setCityList作为类方法被传递给子组件或绑定为事件回调时，没有绑定当前组件实例的this上下文，方法实际执行时this指向全局对象/undefined，因此无法访问类实例上的setState方法。

修复方案 #

以下三种方案任选其一即可：

• 构造函数内手动绑定this（性能最优，推荐）
  在类组件的构造函数中对方法的this指向进行显式绑定：

  constructor(props) {
    super(props);
    this.setCityList = this.setCityList.bind(this);
    this.state = {
      cityList: []
    }
  }
  

• 类属性箭头函数写法（代码最简洁）
  直接将方法改写为箭头函数形式，利用箭头函数继承上层作用域this的特性，固定方法内的this指向组件实例：

  setCityList = (list: CityCode[]) => {
    console.log(list);
    this.setState({cityList: list});
  }
  

• 回调调用时用箭头函数包裹（临时快速修复，不推荐生产环境使用）
  向子组件传递方法时用箭头函数包裹，确保方法执行时this指向正确：

  <EditableCell onCountryChange={(selectedCountry) => this.setCityList(getCityList(selectedCountry))} />
  

联动效果实现注意事项 #

• 国家选择器值变更时，除了更新对应城市选项列表，必须同步清空当前行已选中的城市字段值，避免出现国家已切换、但选中值仍为旧国家城市的脏数据问题
• 如果表格支持多行同时编辑，不要将城市选项列表存在组件全局state中，否则切换某一行的国家会导致所有行的城市选项同步变更，需将每一行的城市选项挂载到对应行的record数据中，按行独立维护选项
• 国家与城市的映射关系建议提前抽离为静态常量，减少重复计算逻辑

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