React Native组件方法调用报错：undefined is not a function 问题排查

嘿，这个问题我刚学React的时候踩过好几次坑！咱们来一步步理清楚为啥会出现"undefined is not a function"的错误，以及怎么解决它。

问题根源：this指向丢失 #

React类组件里定义的普通方法（比如你的addNewAlarm和showAlarms），默认是没有绑定this的。当你把addNewAlarm作为回调函数传递（比如传给按钮的onClick事件），调用这个方法时，this的指向就不再是组件的实例对象了——这时候this可能是undefined或者其他上下文，自然找不到showAlarms方法，就抛出错误了。

三种常见的解决方案 #

1. 在构造函数中手动绑定this

这是比较传统的方式，在组件的构造函数里用bind把方法和组件实例绑定：

import React, { Component } from 'react';

export default class AlarmList extends Component {
  constructor(props) {
    super(props);
    // 绑定方法到组件实例
    this.addNewAlarm = this.addNewAlarm.bind(this);
    this.showAlarms = this.showAlarms.bind(this);
  }

  addNewAlarm() {
    // 你的业务逻辑
    this.showAlarms();
  }

  showAlarms() {
    // 显示闹钟的逻辑
  }

  render() {
    return (
      <button onClick={this.addNewAlarm}>添加新闹钟</button>
    );
  }
}

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

ES6的箭头函数会自动捕获当前上下文的this，所以用箭头函数定义组件方法的话，this会一直指向组件实例：

import React, { Component } from 'react';

export default class AlarmList extends Component {
  // 用箭头函数定义方法
  addNewAlarm = () => {
    // 你的业务逻辑
    this.showAlarms();
  }

  showAlarms = () => {
    // 显示闹钟的逻辑
  }

  render() {
    return (
      <button onClick={this.addNewAlarm}>添加新闹钟</button>
    );
  }
}

这种写法更简洁，也不用手动绑定，现在很多React项目都用这种方式。

3. 在调用时用箭头函数包裹

如果不想修改方法定义，也可以在JSX的事件回调里用箭头函数包裹方法调用：

import React, { Component } from 'react';

export default class AlarmList extends Component {
  addNewAlarm() {
    // 你的业务逻辑
    this.showAlarms();
  }

  showAlarms() {
    // 显示闹钟的逻辑
  }

  render() {
    return (
      {/* 用箭头函数包裹，确保this指向组件实例 */}
      <button onClick={() => this.addNewAlarm()}>添加新闹钟</button>
    );
  }
}

不过要注意：这种方式每次组件渲染时都会创建一个新的箭头函数，在性能要求极高的场景（比如列表项的事件回调）可能会有轻微性能影响，所以更适合简单的场景。

总结 #

本质上就是要确保调用addNewAlarm时，this指向的是AlarmList组件的实例，这样this.showAlarms才能正确找到对应的方法。上面三种方法任选其一都能解决你的问题，推荐第二种箭头函数定义方法的方式，最省心~

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