javascript - React - 每个映射项目的 super 代理请求

Question

我想对搜索结果中映射的每个项目发出 super 代理请求。检查项目 id 是否在数组中:

我有这些方法；一个用于映射结果，另一个是 super 代理获取:

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