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
– Philipp Meissner, Commented Sep 15, 2021 at 14:11

skink · Accepted Answer · 2021-09-15 14:40:45Z

6

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

answered Sep 15, 2021 at 14:40

skink

5,7826 gold badges41 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Artemis J Over a year ago

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!

Collectives™ on Stack Overflow

TypeError: Cannot read properties of undefined

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related