ReactJS. Render data from multiple ajax requests

Question

I need to render the data from multiple ajax requests that are performed in a single method in a separate file.

Here's the ajax method:

const Сonsts = ( () => {
    function _getUsers(usernames) {
        let users = [];
        usernames.forEach( (username) => {
            let u = $.getJSON(`https://api.github.com/users/${username}`)
                     .done( (data) => { u = data; });
            users.push(u);
        });
        return users;
    }
    return {
        getUsers: _getUsers
    }

})();

So, I need the data from the request to be rendered as soon as I get the response from the server.

I need the data to be rendered inside this component:

class Team extends React.Component {

  constructor(props) {
    super(props);
    this.state = this.props.members;
  }

  componentDidMount() {
    this.state.members = this.props.members;
  }

  render () {
    console.log(this.state.members);
    let members = this.state.members.map( (item, index) => {
      console.log(item.responseJSON);
      return (
        <img src={item.avatar_url} key={index} />
      )
    });

    return (
      <div>
        {members}
      </div>
    );
  }
}

I render the component like this:

// $aboutContent is a <div> container.
// Consts.team is the array of github usernames.
React.render(<Team members={Сonsts.getUsers(Сonsts.team)} />, $aboutContent);

but this code gives me Invariant Violation: Team.state: must be set to an object or null and, of course, nothing is rendered.

How can I make my component to be rendered properly even when the ajax request is not yet finished? So, basically, I need the following behavior: the user opens the page; the ajax request is performed and at the same time the <Team /> component is rendered with nothing inside, empty div'; as soon as the ajax request is finished and the valid data is stored in some variable inside the app, the render method should be triggered again and render all the data.

Could you help me with achieving this?

J. Mark Stevens · Accepted Answer · 2015-08-26 17:14:58Z

1

The console.log will trigger multiple times. First with the empty state.members then when setState happens.

    function _getUsers(usernames) {
            let users = [];
            usernames.forEach( (username) => {
                    let u = $.getJSON(`https://api.github.com/users/${username}`)
                                     .done( (data) => { u = data; });
                    users.push(u);
            });
            return {members: users};
    }

class Team extends React.Component {

    constructor(props) {
        super(props);
        //this.state = this.props.members;
        this.state = {members: []};
    }

    componentWillReceiveProps(nextProps) {
        this.setState(_getUsers(nextProps.team));
    }

    render () {
        console.log(this.state.members);
        let members = this.state.members.map( (item, index) => {
            console.log(item.responseJSON);
            return (
                <img src={item.avatar_url} key={index} />
            )
        });

        return (
            <div>
                {members}
            </div>
        );
    }
}

In the top component.

React.render(<Team team={Сonsts.team} />, $aboutContent);

edited Aug 26, 2015 at 17:14

answered Aug 25, 2015 at 21:48

J. Mark Stevens

4,9452 gold badges15 silver badges18 bronze badges

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

2 Comments

Denis Yakovenko Over a year ago

Unfortunately, this doesn't seem to work. It doesn't throw an error though. It just leaves the page blank. And, by the way, the output from the console.log(this.state.members) from the render method is always the following: whenever I get on that page, the console.log is performed twice: first time - it's the empty array [], second time - it's the array of objects that have this properties: done: () error: () fail: () promise: (obj) readyState: 4 responseJSON: Object responseText: "...response string..." status: 200 statusCode: (map) statusText: "OK" success: ()

Denis Yakovenko Over a year ago

do you any ideas why is that so?

Collectives™ on Stack Overflow

ReactJS. Render data from multiple ajax requests

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related