handling multiple ajax calls in reactjs

Question

I've got the following code in my react component.

componentDidMount() {
    getOrganizationsForUserTemp().then((organizations) => {
        this.setState({
            userOrganizations: organizations,
        });
    });

    getUsersOfOrganizationTemp().then((users) => {
        this.setState({
            userOrganizations: users,
        });
    })
}

The above code initiates two ajax calls and when the response is retrieved, it updates the state of the component which results in a re-render of the component.

My problem is that, when the first response is received, the component renders perfectly and then when the second response comes, the previously rendered components disappear from the DOM. I guess that when the second response updates the state, there is no reference for the previous response state.

How can I manage multiple ajax calls in such a way that I could have multiple in a single component? what am I doing wrong here.

Since you are storing the response of both ajax calls into the same state variable you are facing this issue. — Hozefa
– Hozefa, Commented Apr 4, 2018 at 5:24
In the first call you are updating userOrganizations: organizations and in the second call you are updating userOrganizations with user? This does not make sense to me. You should probably have another state variable to hold users data and use it to render the HTML. — TeaCoder
– TeaCoder, Commented Apr 4, 2018 at 5:25

Hozefa · Accepted Answer · 2018-04-04 05:26:02Z

2

Since you are storing the response of both ajax calls into the same state variable you are facing this issue.

You need to do something like

componentDidMount() {
    getOrganizationsForUserTemp().then((organizations) => {
        this.setState({
            userOrganizations: organizations,
        });
    });

    getUsersOfOrganizationTemp().then((users) => {
        this.setState({
            users: users,
        });
    })
}

organizations & user are stored in separate state variables.

answered Apr 4, 2018 at 5:26

Hozefa

1,7366 gold badges22 silver badges35 bronze badges

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

Collectives™ on Stack Overflow

handling multiple ajax calls in reactjs

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related