CODEWITHSUNDEEP
ajaxreactjssetstate
Elvira
Elvira

Reputation: 1440

React state update in ajax success

I'm having problems with setting my state when a ajax call is successfully run. I want to update the state when the ajax process is completed. The text in the div stays on "Busy" instead of "Done", while in the browser Network Tab, I see the status changing from "pending" to status "200".

import React, { Component } from "react";
import * as ReactDOM from "react-dom";
import { extend } from "lodash";

export class StoreToCheck extends React.Component{
  constructor(props){
    super(props);
    this.state = { ListWithISBN :[],
                   getISBNS : false };
    this.ajaxSuccess = this.ajaxSuccess.bind(this);
  }
  getISBNSList(){
    if(!this.state.getISBNS){
      var store_name;
      // loop through array to fill store_name variable

      var ajaxSuccess = this.ajaxSuccess;
      if(store_name != ''){
        apex.server.process(
          'GET_EBOOKS_FROM_STORE',
          {
            success:function (data){
              // when succesfull update state getISBNS
              ajaxSuccess
            }
          }
        );
      }
    }
  }
  ajaxSuccess(){
    this.setState({"getISBNS":true});
  }
  componentDidMount(){
    this.getISBNSList();
  }
  render(){
    return(
      <div>
          {this.state.getISBNS ? "Done" : "Busy"}
      </div>
    )
  }
}

Upvotes: 0

Views: 485

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 282080

You need to call ajaxSuccess method, also instead of storing the correct function reference, you can bind it inplace 

getISBNSList(){
    if(!this.state.getISBNS){
      var store_name;
      // loop through array to fill store_name variable

      if(store_name != ''){
        apex.server.process(
          'GET_EBOOKS_FROM_STORE',
          {
            success: (data) => { // bind here with arrow function
              // when succesfull update state getISBNS
              this.ajaxSuccess() // call the function
            }
          }
        );
      }
    }
  }

Upvotes: 2

Related Questions