如何修复跨类方法调用时的Uncaught TypeError: XXX is not a function错误

你遇到的Uncaught TypeError: _this2.props.updateHandle is not a function和Uncaught TypeError: _this2.props.removeTask is not a function错误，本质是类组件方法的this绑定问题，或者传递方法时的写法错误导致的。下面我来帮你拆解问题并给出具体修复方案：

为什么会报错？ #

在React类组件中，普通的类方法（非箭头函数）默认不会自动绑定组件实例的this。当你把这类方法直接作为props传递给子组件后，子组件调用时this会丢失指向，导致方法无法被正确识别为函数；另外如果传递时不小心写成了updateHandle={this.updateHandle()}（多加了括号），会直接执行方法并把返回值（通常是undefined）传给props，也会触发这个错误。

具体修复方案 #

方案1：在构造函数中手动绑定this #

这是React早期最常用的绑定方式，在父组件的构造函数里把方法的this绑定到组件实例：

class TodoList extends React.Component {
  constructor(props) {
    super(props);
    // 绑定方法的this到组件实例
    this.updateHandle = this.updateHandle.bind(this);
    this.removeTask = this.removeTask.bind(this);
    this.state = { /* 你的状态 */ };
  }

  updateHandle() {
    // 你的更新逻辑
  }

  removeTask() {
    // 你的删除逻辑
  }

  render() {
    return (
      // 正常传递方法给子组件
      <TodoItem 
        key={item.id} 
        item={item} 
        updateHandle={this.updateHandle} 
        removeTask={this.removeTask} 
      />
    );
  }
}

方案2：使用箭头函数定义类方法（推荐） #

利用ES6箭头函数的特性，它会自动捕获当前上下文的this，无需手动绑定：

class TodoList extends React.Component {
  state = { /* 你的状态 */ };

  // 用箭头函数定义方法，this自动绑定到组件实例
  updateHandle = () => {
    // 你的更新逻辑
  };

  removeTask = () => {
    // 你的删除逻辑
  };

  render() {
    return (
      <TodoItem 
        key={item.id} 
        item={item} 
        updateHandle={this.updateHandle} 
        removeTask={this.removeTask} 
      />
    );
  }
}

方案3：传递时用箭头函数包裹（不推荐，仅临时场景使用） #

如果不想修改方法定义，可以在传递props时用箭头函数包裹，但注意这种方式每次组件渲染都会创建新的函数实例，可能带来不必要的性能开销：

render() {
  return (
    <TodoItem 
      key={item.id} 
      item={item} 
      updateHandle={() => this.updateHandle()} 
      removeTask={() => this.removeTask()} 
    />
  );
}

额外检查点 #

确认你在子组件中调用方法时的写法正确，比如不要误写成this.props.updateHandle()以外的形式，比如如果方法需要传参，要确保参数传递正确：

// 子组件中调用示例
handleClick = () => {
  this.props.updateHandle(someData);
}

内容的提问来源于stack exchange，提问作者Багдаулет Сайын