Chrizt0f Chrizt0f - 2 months ago 6
Ajax Question

React: Asynchronous call to update state before final render method is called

Background:
I'm trying to use React to update some UI elements based on a json response from some webservice, however because I have a lot of elements to be rendered, I'm trying to lessen bandwidth by only pulling json if an element's HashCode is updated. In the context of my application I cannot update the asynchronous behavior of my ajax calls. What would be the right way to force the update to my elements only after the asynchronous call is completed?

I realize setting state in WillUpdate is wrong.

Example:



getInitialState: function getInitialState() {
return { hash: 0, json: {}};
},

//Only get the step asJSON if the hash is updated
shouldComponentUpdate: function(nextProps, nextState) {
return this.state.json.hash != nextState.json.hash;
},

tick: function(){
this.updateHash();
},

updateHash: function updateHash(){
something.getUpdateHash(function(data){
var hashR = data.responseJSON;
this.setState({hash: hashR});
}.bind(this));
},

updateJSON: function(){
//This is an asynchronous call
something.getJSON(function(data){
var stepJ = jQuery.parseJSON(data.responseJSON);
this.setState({json: stepJ});
}.bind(this));
},

componentWillMount: function(){
this.updateJSON();
},

componentDidMount: function(){
this.interval = setInterval(this.tick, 10000);
},

componentWillUpdate: function(nextState, nextProps){
//Way to update json state w/o affecting state?
},

render: function render() {
/** Only do render after updateJSON is complete **/
}



Answer

How about call updateJSON in callback of updateHash

updateHash: function updateHash(){
    something.getUpdateHash(function(data){
        var hashR = data.responseJSON;
        if(hashR!==this.state.hash){
            this.updateJSON(hashR)
        }
    }.bind(this));
},

updateJSON: function(hash){
    //This is an asynchronous call
    something.getJSON(function(data){
        var stepJ = jQuery.parseJSON(data.responseJSON);
        this.setState({json: stepJ,hash});
    }.bind(this));
},