React - 每个映射项目的超级请求

Question

我想为我的搜索结果中映射的每个项目发出超级请求。要检查项目ID是否在数组中：

我有这些方法;一个用来绘制结果，另一个用superagent获取：

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); 
     }); 
}, 

任何人都可以建议这是否是最好的方法吗？以及我应该如何去做呢？

感谢

Answer 1

你可以使用其他组件的结果，以利用其生命周期和状态：

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 you need from 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) 
    },