Callback not working in React

Question

I'm having an interesting issue, that I don't seem to understand. I must be overlooking some glaring issue. I'm trying to set the state after checking if the user is logged in, so I decided to implement a callback function. However, it doesn't look like my callback is being executed. Can anyone tell me what I'm doing wrong? The checkAuthentication function works fine, just not the callback function. Any ideas?

Here is a JSFiddle I made showing the issue.

https://jsfiddle.net/69z2wepo/16069/

checkAuthentication: function( cb ) {

  this.setState({
    loggedIn: true,
    userId: 3243,
  }, function(){

    if (cb && (typeof cb == "function")) {
      cb();
      console.log("wtf");
    }

  });

},


componentDidMount: function() {
    this.checkAuthentication( function() {
      this.setState({
        view: "user",
        viewUserId: 54234,
      });
    }).bind(this);
 },

You need a bind(this) in the last line of your example since you're using `this` in the callback. Other than that, the code you've supplied looks fine. Perhaps provide a jsfiddle or other example showing enough of the code to help you debug it? — Ed Ballot, Sep 16 '15 at 01:58
From what I can see, this part of your code: this.checkAuthentication( function() { this.setState({ view: "user", viewUserId: contentId, }); }); isn't part of a method, so how will it ever get triggered? — moismailzai, Sep 16 '15 at 02:02
The code doesn't make a lot of sense to me. Please provide a complete example and indent it properly. — Felix Kling, Sep 16 '15 at 02:18
Thanks @Ed, I tried that, but now I get a `this.checkAuthentication(...) is undefined` error. I added a JS fiddle to try and show the issue. I'm not sure why you guys are downvoting my post. I think this is a valid question. — Bill Walters, Sep 16 '15 at 02:58
I downvoted the question because the code was incomplete and it was impossible to know how it is executed and what the issue could be. Now it's clear. — Felix Kling, Sep 16 '15 at 03:32
This should be closed as duplicate of http://stackoverflow.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback. Even though the question is clearer now, you haven't really provided much info about the issue other than "it doesn't work". [Learn how to debug JavaScript](https://developers.google.com/web/tools/javascript/) so that you can do your own investigation and provide more useful information. — Felix Kling, Sep 16 '15 at 03:38

score 1 · Answer 1 · edited May 23 '17 at 11:59

It's true that you can add .bind(this) to fix the callback (see also How to access the correct `this` context inside a callback? for more info).

However, you added the .bind(this) call in the wrong place. You are doing

this.checkAuthentication(...).bind(this);

i.e. you are calling .bind on the return value of this.checkAuthentication. However, this.checkAuthentication doesn't return anything, so the browsers correctly throws the error:

Uncaught TypeError: Cannot read property 'bind' of undefined

You have to call .bind on the callback function:

this.checkAuthentication(function() { ... }.bind(this));

Fixed fiddle. Also see the link above for other solutions for the this problem.

Callback not working in React

1 Answers1