Question

我想调用一个函数，并显示一条错误消息“ this.testFunc不是函数”

我认为问题在于该函数在ComponentDidMount中初始化，然后尚未定义testFunc，但我不知道如何解决它。

var _receivedNb = 0

export default class App extends Component {
  constructor(){
    super()
  }

  componentDidMount() {

    BleManager.start({showAlert: false});

    this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', this.handleUpdateValueForCharacteristic );
  }


  handleUpdateValueForCharacteristic(data) {
      _receivedNb = this.testFunc();
  }

  testFunc() {
    var r = 2;
    return r;
  }

Answer 1

您必须绑定事件处理程序

constructor(){
  super()
  this.handleUpdateValueForCharacteristic = this.handleUpdateValueForCharacteristic.bind(this)
}

Answer 2

您应该在构造函数中绑定该函数。我希望以下代码会有所帮助，

var _receivedNb = 0

export default class App extends Component {
  constructor(props){
    super(props)
    this.testFunc = this.testFunc.bind(this);
  }

  testFunc() {
    var r = 2;
    return r;
  }
  componentDidMount() {

    BleManager.start({showAlert: false});

    this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', this.handleUpdateValueForCharacteristic );
  }


  handleUpdateValueForCharacteristic(data) {
      _receivedNb = this.testFunc();
  }

Answer 3

将函数handleUpdateValueForCharacteristic声明为箭头函数，以使其继承外部作用域（即类作用域），您应该没事。

handleUpdateValueForCharacteristic = data => {
  _receivedNb = this.testFunc();
}

Answer 4

这是因为this内的handleUpdateValueForCharacteristic引用并不是您的想法。您可以从You Dont Know Js

详细了解

解决方案有多种解决方法，您需要在this内修复handleUpdateValueForCharacteristic引用

一种简单的方法是使用 ARROW FUNCTION => 。箭头函数从定义函数的位置保留this。

var _receivedNb = 0

export default class App extends Component {
    constructor(){
        super()
    }

componentDidMount() {

    BleManager.start({showAlert: false});

    this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', this.handleUpdateValueForCharacteristic );
}


handleUpdateValueForCharacteristic = (data) => {
    _receivedNb = this.testFunc();
}

testFunc = () => {
  var r = 2;
  return r;
}

第二种方法是使用 .call，.bind或.apply 。稍后您可以阅读有关它们的信息。简而言之，bind将this用作参数，并返回一个硬绑定函数，该函数始终引用.bind中提供的内容。您可以简单地使用handleUpdateValueForCharacteristic.bind(this)并进行调用。最好的方法是在constructor内部。

var _receivedNb = 0

export default class App extends Component {
    constructor(){
        super()  
        this.newHandleUpdateValueForCharacteristic = handleUpdateValueForCharacteristic.bind(this)

    }

componentDidMount() {

    BleManager.start({showAlert: false});

    this.handlerUpdate = bleManagerEmitter.addListener('BleManagerDidUpdateValueForCharacteristic', this.handleUpdateValueForCharacteristic );
}


handleUpdateValueForCharacteristic = (data) => {
    _receivedNb = this.testFunc();
}

testFunc = () => {
  var r = 2;
  return r;
}

并在其他任何地方使用newHandleUpdateValueForCharacteristic。

调用并应用类似于绑定，只是不同之处在于它立即使用此引用以及在调用和应用内部传递的其他必需参数立即调用该函数。

myFunction不是函数

4 个答案: