javascript - Multiple async XMLHttpRequests in React -

i did example of multi async xmlhttpreqest based on examples found:

var  url=["https://api.github.com/users/github","https://api.github.com/users/github/repos"];  var xhr = [null, null];  (var = 0; < 2; i++) {    (function(i) {  xhr[i] = new xmlhttprequest();  xhr[i].open("get", url[i], true);  xhr[i].onload = function (e) {    if (xhr[i].readystate === 4) {      if (xhr[i].status === 200) {        console.log(xhr[i].responsetext);      } else {        console.error(xhr[i].statustext);      }    }  };  xhr[i].onerror = function (e) {    console.error(xhr[i].statustext);  };  xhr[i].send(null);    })(i);  }

thing having problem implementing in react can not assign value this.setstate({json_objs[i]:json.parse(xhr[i].responsetext}) object array.

this react code not working due problems assigning value:

import react, { component, proptypes } 'react';  import reactdom 'react-dom';          class imageviewer extends react.component {      constructor() {          super();          this.state = {              json_objs : [null,null],              links:["https://api.github.com/users/github/repos","https://api.github.com/users/github"]  			          }      }  	componentdidmount() {      var xhr = [null, null]      (var = 0; < 2; i++) {      (function(i) {  		xhr[i] = new xmlhttprequest();  		xhr[i].open("get", this.state.link, true);  		xhr[i].onload = function (e) {  			if (xhr[i].readystate === 4) {  				if (xhr[i].status === 200) {  					this.setstate({ json_objs[i]:json.parse(xhr[i].responsetext)});  				} else {  				console.error(xhr[i].statustext);  				}  			}  		}.bind(this);  		xhr[i].onerror = function (e) {  		console.error(xhr[i].statustext);  		};  		xhr[i].send(null);        })(i);  }    		 render() {             if (!this.state.json_objs[0] || !this.state.json_objs[1]) {  				return <div>loading...</div>;  		}  		return(  <div>  <div><h1>{this.state.json_objs[1].email}</h1></div>  				   {this.state.json_objs[0].sort(function(a, b){var keya = new date(a.updated_at),keyb = new date(b.updated_at);if(keya > keyb) return -1;if(keya < keyb) return 1;return 0;}).map((obj, index)  => {                              return (  								 <div key={index}>  									<div>{obj.name}</div>  									<div>{(new date(obj.updated_at)).tostring()}</td>  								</div>                              )                      })}  </div>      )  }}  reactdom.render(<imageviewer />, document.getelementbyid('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>  <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>  <div id="root"></div>

i have been reading modyfing arrays in react having problems implementing it.

i think promise's helpful here. wrap each xhr request in promise, use promise.all() wait both of them complete, set results state (it resolve array of response objects):

promise.all([0, 1].map((index) => {   return new promise((resolve, reject) => {     const xhr = new xmlhttprequest()     xhr.open("get", this.state.links[index], true)     xhr.onload = function() {       if (xhr.readystate === 4) {         if(xhr.status === 200) {           resolve(json.parse(xhr.responsetext))         } else {           reject(xhr.statustext)         }     }   }) })).then((json_objs) => {   this.setstate({ json_objs }, () => {      console.log('json_objs => ', this.state.json_objs)   }) }).catch(err => console.error(err))