react component state change after ajax call but does not rerender component

user_6038095 0
Viewed 324

On this part the user gets to comment on posts. After it gets checked on server side and the data is recieved, I try to change the this.state.comments value. and so it's done. But the problem is, it is not changing the comment section on component. I have read the previous questions about rerendering so please don't mark as duplicate. Below is the code:

$.post("requests.php", {
    requestKey: 'newComment',
    commenterUser: commenterUser,
    commenterEmail: commenterEmail,
    theComment: theComment,
    pnum: pnum}, function(data, status, xhr){
      if(status == 'success'){
        if(data == 'commented'){
          this.setState({
            comments: data
          })
        }else{

        }
      }
    });

The data received is all the comments related to the post and the comments section is a place where all the comments are shown.

reactjs ajax javascript
3 Answers

You can also use arrow function instead of doing manual binding.

this.setState is not working because it has scope issue when you use normal function.

Change it to arrow function. Check below code

   $.post("requests.php", {
        requestKey: 'newComment',
        commenterUser: commenterUser,
        commenterEmail: commenterEmail,
        theComment: theComment,
            pnum: pnum}, (data, status, xhr) => {
                if(status == 'success'){
                    if(data == 'commented'){
                        this.setState({
                            comments: data
                        })
                    }else{

              }
           }
       });

Edit:

If you want to stay away with scope issues you can use arrow function. When you use arrow function then you no need to bind your function manually in constructor

 submitComment = () => {

 }

If you use normal function and to play with state or props inside that function, then you need to manually refer current object to a local variable like below

 let that = this;
 that.setState({
     name: “update”
 });

Sorry if there are any typo mistakes. I am answering in mobile

user_69034970 
let _this = this;
$.post("requests.php", {
  requestKey: 'newComment',
  commenterUser: commenterUser,
  commenterEmail: commenterEmail,
  theComment: theComment,
  pnum: pnum
}, function(data, status, xhr){
    if  (status == 'success'){
       if(data == 'commented'){
          _this.setState({ comments: data })
       } else{

       }
    }
});

I think the issue is with your scope of this, in javascript this is always in lexical context.

user_49213190

You have a scope problem.

Let's consider this example:

function foo() {
    this.bar = 'lorem';
    this.ipsum = function() {
        console.log(this.bar);
    };
}

If you call ipsum, it will log undefined, because the this there refers to the ipsum function. Let's consider this example:

function foo() {
    this.bar = 'lorem';
    var that = this;
    this.ipsum = function() {
        console.log(that.bar);
    };
}

In this case that stores the outer this, so 'lorem' will be logged if ipsum is called. Let's consider an example for an arrow function:

function foo() {
    this.bar = 'lorem';
    this.ipsum = () => {
        console.log(this.bar);
    };
}

In this case if you call ipsum 'lorem' will be written to the console.

You can also use bind for this purpose.

Let's use an arrow function for your example:

$.post("requests.php", {
    requestKey: 'newComment',
    commenterUser: commenterUser,
    commenterEmail: commenterEmail,
    theComment: theComment,
    pnum: pnum}, (data, status, xhr) => {
      if(status == 'success'){
        if(data == 'commented'){
          this.setState({
            comments: data
          })
        }else{

        }
      }
    });
user_4365600
Related