0

我想为我的搜索结果中映射的每个项目启动一个超级代理请求。要检查项目 id 是否在数组中：

我有这些方法；一个映射结果，另一个是超级代理获取：

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

谁能建议这是否是最好的方法？我应该怎么做？

谢谢

4

1 回答 1

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

…</p> 

    renderResultNodes: function () {
        if(!this.props.results) return;

        return this.props.results.map(function(result) {
            return <Result key={result.id} onClick={this.selectSchool} {...result}/>
        }, this)
    },
于 2015-06-20T09:24:10.370 回答