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

Question

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?

please show some code examples of your component, your question is too broad as it currently stands — deowk
– deowk, Commented Nov 2, 2015 at 16:50

Stefan · Accepted Answer · 2015-11-02 23:45:37Z

3

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

answered Nov 2, 2015 at 23:45

Stefan

4,1804 gold badges37 silver badges40 bronze badges

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

1 Comment

Phoelpis Over a year ago

Thank you tak3r, exactly what I was looking for!

Thacker · Accepted Answer · 2015-11-02 23:27:07Z

0

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

edited Nov 2, 2015 at 23:27

answered Nov 2, 2015 at 19:54

Thacker

411 silver badge6 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related