javascript - React - superagent request per mapped item -
i fire off superagent request each item mapped in search results. check if item id in array:
i have these methods; 1 map results, , other superagent fetch:
renderresultnodes: function () { if(!this.props.results) return; return this.props.results.map(function (result) { // fire off request here? // show tick icon if id exists var showicon = this.isschool(school.id) ? <i classname="icon item-icon-right ion-checkmark-circled"></i> : ''; return ( <a classname="item item-icon-right" key={result.id} href="#" data-school-id={result.id} data-school-name={result.school_name} onclick={this.selectschool} > <h2>{result.school_name}</h2> <p>{result.s_address1}</p> {showicon} </a> ); }.bind(this)); }, // check id exists in json isschool: function (schoolid){ var url = osaapiservice.buildrequesturl('home', [schoolid]); fetch(url) .then(function (response) { return response.json(); }).then(function (data) { console.log(data); }.bind(this)).catch(function (ex) { console.log(ex); }); },
can advise if best way this? , how should go it?
thanks
you use component results make use of lifecycle , state:
var result = react.createclass({ getinitialstate() { return { isschool: false } }, componentdidmount() { var url = osaapiservice.buildrequesturl('home', [this.props.id]) fetch(url) .then(response => response.json()) .then(data => this.setstate({isschool: /* whatever need data */})) .catch(err => console.log(err)) }, render() { return <a classname="item item-icon-right" onclick={this.props.onclick}> <h2>{this.props.school_name}</h2> <p>{this.props.s_address1}</p> {this.state.isschool && <i classname="icon item-icon-right ion-checkmark-circled"></i>} </a> } })
…
renderresultnodes: function () { if(!this.props.results) return; return this.props.results.map(function(result) { return <result key={result.id} onclick={this.selectschool} {...result}/> }, this) },
Comments
Post a Comment