setState in none React component in a seperate file

Question

Doing some xhr requests to the backend, I want all my requests to be in a separate file that is WebAPIUtils.js

../utils/WebAPIUtils.js

var request = require('superagent');
var constants = require('../constants/constants');

var APIEndPoints = constants.APIEndPoints;

module.exports = {
  loadPost: function() {
    request.get(APIEndPoints.USER + '/' + 'ahmadajmi')
      .set('Accept', 'application/json')
      .end(function(error, res) {
        if (res) {
          var json = JSON.parse(res.text);
          return json;
        }
      });
  }
};

post.js

var React = require('react');
var WebAPIUtils = require('../utils/WebAPIUtils');
// other requires

var Post = React.createClass({

  getInitialState: function() {
    return {data: ''}
  }
  ,
  componentDidMount: function() {
    // Want to setState like this
    // this.setState({data: WebAPIUtils.loadPost()});
    // instead of this
    this.loadPost();
  }
  ,
  // this method is working fine here, but I want to use the one in `WebAPIUtils.js` file
  loadPost: function() {
    request.get(APIEndPoints.USER + '/' + 'ahmadajmi')
      .set('Accept', 'application/json')
      .end(function(error, res) {
        if (res) {
          var json = JSON.parse(res.text);
          this.setState({data: json})
        }
      }.bind(this));
  },
  render: function() {
    return (
      <div className="post">
      {this.state.data}
      </div>
    );
  }
});

The above code is working fine, but I want to move all my xhr requests to WebAPIUtils.js file. So what is the proper way to connect them and update the state.

It doesn't make sense to call `setState` outside the React component. Instead, pass the result from the Ajax call back to the caller. This should help: [How to return the response from an asynchronous call?](http://stackoverflow.com/q/14220321/218196). — Felix Kling, Sep 30 '15 at 15:05
@FelixKling Thanks so much Felix, returning the response correctly did it. — Ahmad Ajmi, Sep 30 '15 at 15:28

score 1 · Accepted Answer · edited May 23 '17 at 12:29

As Felix advised to check: How do I return the response from an asynchronous call?

Did a callback function and It works

../utils/WebAPIUtils.js

var request = require('superagent');
var constants = require('../constants/constants');

var APIEndPoints = constants.APIEndPoints;

module.exports = {
  // Add callback
  loadPost: function(callback) {
    request.get(APIEndPoints.USER + '/' + 'ahmadajmi')
      .set('Accept', 'application/json')
      .end(function(error, res) {
        if (res) {
          var json = JSON.parse(res.text);
          callback(json);
        }
      });
  }
};

post.js

var React = require('react');
var WebAPIUtils = require('../utils/WebAPIUtils');

var Post = React.createClass({
  getInitialState: function() {
    return {data: ''}
  }
  ,
  componentDidMount: function() {
    // Execute loadPost and setState based on the returned data
    WebAPIUtils.loadPost(function(result) {
      this.setState({data: result})
    }.bind(this));
  }
  ,
  render: function() {
    return (
      <div className="post">
      {this.state.data}
      </div>
    );
  }
});

setState in none React component in a seperate file

1 Answers1