React state update in ajax success - ajax

Question

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>
)
}
}

Answer 1

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
}
}
);
}
}
}