javascript - Wait for object array to load and map() it. React -
i trying loop through json_obj after loads using async xmlhttprequest() json_obj null @ start map() crashes.
here code:
import react, { component, proptypes} 'react'; import reactdom 'react-dom'; class imageviewer extends react.component { constructor() { super(); this.state = { loading: true, json_obj : null, link: "https://api.github.com/users/github/repos" } } componentdidmount() { var xhr = new xmlhttprequest(); xhr.open("get", this.state.link, true); xhr.onload = function (e) { if (xhr.readystate === 4) { if (xhr.status === 200) { this.setstate({ json_obj :json.parse(xhr.responsetext).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;})}); } else { console.error(xhr.statustext); } } }.bind(this); xhr.onerror = function (e) { console.error(xhr.statustext); }; xhr.send(null); } render() { return ( <div> {this.state.json_obj.map((obj, index) => { return ( <div > <h1>{obj.name}</h1> <h1>{obj.updated_at}</h1> </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 tried use conditional rendering throws errors well:
import react, { component, proptypes} 'react'; import reactdom 'react-dom'; class imageviewer extends react.component { constructor() { super(); this.state = { loading: true, json_obj : null, link: "https://api.github.com/users/github/repos", stuff : {name:"loading", updated_at:"loading"} } } componentdidmount() { var xhr = new xmlhttprequest(); xhr.open("get", this.state.link, true); xhr.onload = function (e) { if (xhr.readystate === 4) { if (xhr.status === 200) { this.setstate({ json_obj :json.parse(xhr.responsetext).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;})}); } else { console.error(xhr.statustext); } } }.bind(this); xhr.onerror = function (e) { console.error(xhr.statustext); }; xhr.send(null); } render() { return ( <div> {(this.state.json_obj ? this.state.json_obj : this.state.stuff).map((obj, index) => { return ( <div > <h1>{obj.name}</h1> <h1>{obj.updated_at}</h1> </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>
so check if it's null , return else:
if (!this.state.json_obj) { return <div>loading...</div>; } return ( <div> {this.state.json_obj.map((obj, index) => ( <div key={obj.name}> <h1>{obj.name}</h1> <h1>{obj.updated_at}</h1> </div> ))} </div> ) your code throwing because this.state.stuff object , can't iterate on object .map. if this.state.json_obj object , not array need object.keys(this.state.json_obj).map(....
Comments
Post a Comment