Unsure of async execution timing for react.js

Question

I'm trying to pull data from a database using a javascript/jquery function to populate existing fields on a website before the initial render. My understanding is that I have to call ComponentWillMount in order to have the state ready before the initial render. Below is a sample of what I have

  componentWillMount:function()
  {
    var currentPage = location.hash;
      getform(globalObj["#login"]["sessionId"], globalObj["#encsearch"]["ID"], formType, function(err, data)
      {
        console.log("Start form")
        var info = data["FormData"];
        console.log("End form");
      });
      console.log("Start Outside")
      this.setState({"fieldValuePairs": info});
      console.log(this.state.fieldValuePairs);
      console.log("End Outside")
    }
  },
  render: function() {
    console.log("Rendered first before FormData");
    return(
      <div className="twelve columns">
        <PageBuilder handleChange={this.handleChange}
                     pageName= {this.props.currentPage}
                     layoutConfig={this.state.layout}
                     initDataObj={this.state.fieldValuePairs}
                     rowClasses="row"/>
      </div>
    );
  }
});

function getForm(sessionId, ID, formType, done) {
                $.getJSON('/api/los/loans/loan/forms/get_form/', {"sessionId": sessionId, "Id": ID, "formType": formType})
                .done(function(data) {
                  done(null, data);
                }).fail(function(err) {
                  done(err, null);
                }).always(function() {
                                ;
                });
}

I saw this question and answer that is similar to what I am asking, React fetch data in server before render ,but the major difference is that I am calling and waiting for the data from a database to get back to me. Since Javascript does not wait for the data to come back, the initial render happens before the data is retrieved and the state is updated. I'm also unable to call this.state.fieldValuePairs inside the getform area; I assume it is because it is not in the scope of the function. Below is the execution order of the console log.

Start Outside
End Outside
Render first before FormData
Start Form
End Form

Question: How can I get the data before the initial render? Is it because the function is taking too much time in execution before var info = data["FormData"];?

adrianj98 · Accepted Answer · 2016-05-03 20:13:58Z

1

this is not how react works. You cant get the data from ajax before the first render. but once it is render you should up date the this.state value to re-render the dome.

to get the this you need to use a => function shortener.

 var self = this;
 getform(globalObj["#login"]["sessionId"], globalObj["#encsearch"]["ID"], formType,function(err, data)
  {
    console.log("Start form")
    self.setState({ info : data["FormData"] } );
    console.log("End form");
  });

after the state value is update the render will be called again

edited May 3, 2016 at 20:13

answered May 2, 2016 at 21:03

adrianj98

5732 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

LampPost Over a year ago

A function shortener? that is something I never heard of, but I am unable to use that "symbol". I ended up tweaking the initialstate to handle my problem.

adrianj98 Over a year ago

Sorry I made the assumption since it was react that is was es6. In that case my original code would have worked. But looking at your code it is es5 I updated for future reference

Collectives™ on Stack Overflow

Unsure of async execution timing for react.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related