Cannot GET after async AJAX request in reactjs react.Component

Question

I have a problem with my reactjs code. I've read the thread about the async world and the problems that can occur and I think I fix that, but now I get a blank with a text of Cannot GET /thenameofthepage.

This is my code right after the react.Component

getList() {
    var returnValue;
      $.ajax({
        type: "get",
        url: "###URL###",
        cache: false,
        async: false,
        success : function(data) {
         returnValue = data;
        }
      });

    return returnValue;
  }

and this is the code right after render() {

console.log(this.getList());

If I console log in the function then everything is okay. But when I try to pass it to a variable everything breaks. I did async. Not working. I tried with initial states and ComponentDidMount() again not working.

P.S

I tried by using internet guide:

constructor() {
    this.state = { data: [] };
  }
  getList() {
    $.ajax({
      type: "get",
      url: "http://havvamustafa.devel.signature.eu.com/manage/collection/list_all_ajax",
      cache: false,
      dataType: 'json',
      success: (data) => {
        this.setState({data: data});
      }
    });
  }

Then

componentDidMount() {
    this.getList();
  }

And in the end

console.log(this.state.data);

Now it gives me error because of the constructor.

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

2

From Jquery $.ajax's documentation, the use of async: false is deprecated

async (default: true)

Type: Boolean

By default, all requests are sent asynchronously (i.e. this is set to true by default). If you need synchronous requests, set this option to false. Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active. As of jQuery 1.8, the use of async: false with jqXHR ($.Deferred) is deprecated; you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done() or the deprecated jqXHR.success().

I don't know what kind of problems do you think of when dealing with asynchronous data fetch, but don't forget that using synchronous requests freeze the browser while the request is pending. You could make it easier by doing :

getList() {
  $.ajax({
    type: "get",
    url: "###URL###",
    cache: false
  }).done(this.handleSuccess);
},

handleSuccess(results) {
  this.setState({data: results});
}

Your data processing is done in an other method, it will be cleaner !

edited Jun 20 '20 at 09:12

Community

1
1

answered Aug 31 '15 at 13:25

Tom

300
1
9

Its not working. Or I am not doing it properly. I added your code. then added getInitialState() { return { data : [] }; } Then added : componentDidMount() { this.getList; } And in the render if(jQuery.isEmptyObject(this.state.data)) { console.log("No data"); } else { console.log(this.state.data); } But again it gives me that blank page and the Cannot GET. If I try to go to the page via link then it the console it says : Uncaught TypeError: Cannot read property 'data' of null – g9m29 Aug 31 '15 at 13:43
1

constructor() { super(); this.getList = this.getList.bind(this); this.state = { data: [] }; }. – J. Mark Stevens Aug 31 '15 at 15:05
It worked. Thank you. Thank you very much man. OMG Thank youuuu. <3 You are a life saver. – g9m29 Sep 01 '15 at 09:50
@g9m29: if this was the solution, please accept it. To do so, click on the tick icon on the left hand side, so that it turns green. This is how we mark questions as resolved here. – halfer Sep 09 '15 at 22:33

Cannot GET after async AJAX request in reactjs react.Component

1 Answers1