TypeError: Cannot read properties of undefined

Question

Working in Angular 12 and experiencing an error when I attempt to call a method within another method. Here's an abstraction of what I'm dealing with (in TypeScript as I am in Angular

export class SomeClass {

  testvariable

  onTaskCompleted(results) {
    if (!results) {
      return;
    } else {
      //The line below works
      console.log(results);
      //The line below throws and error
      this.drawSomething(results)
      //In fact any reference to something outside of this function throws an error
      this.testvariable = results
    }
  }

  //The unique thing about OnTaskCompleted is that it is also used as a callback handler by a 3rd party library which is throwing the error
  //It is called in another function like so.  It is producing the correct result in onTaskCompleted, but breaks when I do something like above
  this.something.onResults(this.onResults);

  drawSomething(results) {
    if (!results) {
      return;
    } else {
      //perform some work
    }
  }
}

}

When I run this I get a TypeError: Cannot read properties of undefined. If I include the doSomethingElse function in any of the other functions defined in my class I have no issue and it works as expected. The only other thing of note is that the function where I'm having this issue doSomething() is used as a callback by an external library and that seems to be what is throwing the error whenever I include any reference to something 'outside' of doSomething in the doSomething function. Any thoughts would be appreciated

You need to provide a little more code and context. At some point (which the error message should hint you at) you access something in the chain that is `undefined` but you expect it to be something else. Given the current piece of code we can not provide help. — Philipp Meissner, Sep 15 '21 at 14:11

score 5 · Accepted Answer · answered Sep 15 '21 at 14:40

the function where I'm having this issue doSomething() is used as a callback

You're most likely passing the function like this:

library.externalFunction(this.doSomething);

Which is a problem because this parameter is set to the caller, i.e. it will not be the class instance anymore. If doSomething() tries to access a property on this, it will be an error.

One correct way of writing this would be:

library.externalFunction(param => this.doSomething(param));

Arrow functions capture this and behave more like what you'd expect them to behave.

Alternatively, one could explicitly bind this on the function:

library.externalFunction(this.doSomething.bind(this));

There are quite a few answers here that explain function scoping, e.g. https://stackoverflow.com/a/20279485

This is exactly what the issue was and your solution fixed it immediately. I was researching the 'this' problem with my code into the wee hours of the evening but sadly did not have enough brain cells to resolve it! Thank you so much for your help! — Artemis J, Sep 15 '21 at 14:53

TypeError: Cannot read properties of undefined

1 Answers1