magnat magnat - 3 months ago 20
React JSX Question

Several requests on componentDidMount

I have a React app with one parent component and three child components. In parent component I have state containing data and pass those data in props to child components. I have also three endpoints and have to send three ajax requests on parent component's componentDidMount function. How to do this in React?

var Parent = React.createClass({
getInitialState: function(){
return ( {
data1: [],
data2: [],
data3: []
});
},
componentDidMount: function() {
???
???
???
},
render: function(){
return (
<div>
<Child1 data={this.state.data1} />
<Child2 data={this.state.data2} />
<Child3 data={this.state.data3} />
</div>
)
}
})

var Child1 = React.createClass({
render: function() {
return (
<div>
{this.props.data}
</div>
)
}
})

var Child2 = React.createClass({
render: function() {
return (
<div>
{this.props.data}
</div>
)
}
})

var Child3 = React.createClass({
render: function() {
return (
<div>
{this.props.data}
</div>
)
}
})


I want to render parent component with overlay "Loading ..." and on componentDidMount send 3 requests, update state and pass data as a props to child components only if all 3 requests are finished with success and then render / rerender these child components. If there is a problem with one request I don't want to render any child component (Loading... is keep going until success). Async or one request in success of previous one?

Thanks in advance.

Answer

Something like this could work. The ajax calls are psuedo-code. I assume you are using some ajax api libarary. - in this example, I use superagent (w/o its additional promise lib, instead I just use the es6 promise). I use map with Promise.all - basically, we wait till all ajax requests get returned.. in the "then" I update the state with the results. Once the promise.all is resolve, it passes on an array containing each of the requests, in the order you make the request. In "ajaxApi" - those are the api calls. I hope this helps.

NOTE: I am assuming es6 here, thus my usage of promise.all and some es6 shorthan. If you are not using es6, I apologize. Let me know, and I can show a non es6 solution.

var Parent = React.createClass({
    getDefaultProps: function() {
        return {
          ajaxApi: ['foo1','foo2','foo3']
        };
    },
    getInitialState: function(){
        return ( {
            data1: [],
            data2: [],
            data3: []
        });
    },
    componentDidMount: function() {
      Promise.all(this.props.ajaxApi
        .map(a => {
            return new Promise((resolve, reject) => {
                //using superagent here (w/o its promise api), "import request as 'superagent'. You'd import this at the top of your file.
                request.get(a)
                  .end((error, response) => {
                    if (error) {
                      return resolve(response)
                    } else {
                      resolve()
                    }
               })
            })
        )
        .then(v => {
            this.setState({
              data1: v[0],
              data2: v[1],
              data3: v[2]
            })
        })
        .catch(() => {
            console.error("Error in data retrieval")
        })
    },
    render: function(){
        return (
            <div>
                <Child1 data={this.state.data1} />
                <Child2 data={this.state.data2} />
                <Child3 data={this.state.data3} />
            </div>
        )
    }
})

// here is an Axios version w/o es6. I am making some assumptions here. I hope you can adapt to your own needs.

var Parent = React.createClass({
    // these are your api calls
    getDefaultProps: function() {
        return {
          ajaxApi: ['api/call/1','api/call/2','api/call/3']
        };
    },
    getInitialState: function(){
        return ( {
            data1: [],
            data2: [],
            data3: []
        });
    },

    fetchApiCallData: function(api) {
        return axios.get(api);
    },

    componentDidMount: function() {
       axios.all(this.props.ajaxApi.map(function(api) {
           fetchApiCallData(api)
       })).then(axios.spread(function(req1, req2, req3) {
        // requests complete
           this.setState({
              data1: req1,
              data2: req2,
              data3: req3
            })
       }));
    },
    render: function(){
        return (
            <div>
                <Child1 data={this.state.data1} />
                <Child2 data={this.state.data2} />
                <Child3 data={this.state.data3} />
            </div>
        )
    }
   })
Comments