React Native函数调用异常：无法找到`this.function2`求解决

嘿，我帮你找出了几个导致this.function2找不到的核心问题，还有几个小bug需要一起修正：

1. 回调函数的this指向错误（最关键的问题） #

你在function1里给listener.on传入的是一个普通函数作为回调，当这个回调被触发时，它内部的this并不指向你的Test组件实例——普通函数的this是在调用时决定的，这里会指向listener或者全局对象，自然就找不到组件上的function2了。

解决这个问题最简单的方式是把回调改成箭头函数，箭头函数会继承外层作用域的this，也就是你的组件实例：

// 把普通回调改成箭头函数
const myListener = listener.on('something', () => {
  // 这里的this就指向Test组件实例了
  this.function2(/* 参数 */);
});

如果你更习惯用普通函数，也可以用.bind(this)绑定this：

const myListener = listener.on('something', function() {
  this.function2(/* 参数 */);
}.bind(this));

2. 其他需要修正的小问题 #

• listener.on的语法错误：你现在的写法listener.on(something) { ... }是错的，正确的用法应该是listener.on('事件名称', 回调函数)，需要用逗号分隔事件名和回调。
• 参数不匹配：你的function2用对象解构接收参数（({ key, name, email })），但调用的时候传的是三个单独的变量this.function2(key, name, email)，这样解构出来的key、name都会是undefined。要么改成传对象this.function2({ key, name, email })，要么把function2的参数改成普通形式(key, name, email)。
• 未声明的变量：key、name、email没有用let/const声明，会变成全局变量，这是个潜在的bug，一定要加上声明。

修正后的完整代码 #

class Test {
  componentDidMount() {
    this.function1();
  }

  function1() {
    // 修正listener.on语法，用箭头函数保证this指向
    const myListener = listener.on('something', () => {
      console.log('function1 triggered');
      // 声明变量，避免全局污染
      const key = 'djh3489739082';
      const name = 'gary';
      const email = 'gary@email.com';
      // 传对象匹配解构参数
      this.function2({ key, name, email });
    });
  }

  // 保持对象解构的参数形式
  function2 = ({ key, name, email }) => {
    console.log('key: ' + key);
    console.log('name: ' + name);
    console.log('email: ' + email);
  }
}

如果不想改调用方式，也可以调整function2的参数：

// 改成普通参数形式
function2 = (key, name, email) => {
  console.log('key: ' + key);
  console.log('name: ' + name);
  console.log('email: ' + email);
}

关键总结 #

• 类组件中，异步回调、事件监听的回调一定要注意this的指向，优先用箭头函数或者绑定this来确保指向组件实例
• 函数调用时要保证参数传递形式和接收方的定义匹配
• 所有变量都要用let/const声明，避免意外的全局变量污染

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