CODEWITHSUNDEEP
reactjs
Phoelpis
Phoelpis

Reputation: 55

React Js: How to reload the initial data loaded via ajax?

I get my initial data from an outside JSON in

componentDidMount: function() { .... $.get(jsonfile, function(data) { ....

But the state of "jsonfile" changes via an input. When the state of "jsonfile" prop changes the render method is invoked again, but I will also want to re-run the $.get request. What would be the proper (react) way to do it?

Upvotes: 0

Views: 4895

Answers (2)

Stefan
Stefan

Reputation: 4130

You should abstract away your data fetching. If you put your fetching of data in a separate helper method you can call that method when needed, and it should do the fetching (and later updating) of the state

React.createClass({
    componentDidMount: function () {
        this.fetchData();
    },

    fetchData: function () {
        var _this = this;
        $.get('....', function (result) {
            _this.setState(result);
        });
    },

    handleClick: function () {
        this.fetchData();
    },

    render: function () {
        return (<div onClick={this.handleClick}>{data}</div>);
    },
});

Upvotes: 3

Thacker
Thacker

Reputation: 41

Please do upload some code from your project if you can.

From what I understand, you are calling an API to produce a JSON response and you have a user input to the same json?

In that case if you want to make supplementary calls to the API, you should place your API call in the correct Lifecycle Methods provided by a react component.

Please see https://facebook.github.io/react/docs/component-specs.html

Upvotes: 0

Related Questions