React JS 2调用相同的组件

Question

我是React的新手，我试图使用.map循环遍历一组Json对象。我使用Ajax进行2次Json调用并遍历第一次。

基本上我想循环第一次调用的数据，并在同一个map循环中包含第二个调用数据。

示例（蓝色=第一次通话，红色=第二次通话）：

所以上面的图像是用下面的代码生成的，而this.props.data是第一次调用Ajax的结果：

var firstLine = this.props.data.map(function(metric) {
    if(metric.line == 1) {
      return (
            <FirstLineBox name={metric.name} key={metric.name} value={metric.value} />
      );
    }
}); 

和FirstLineBox

var FirstLineBox = React.createClass({
  render: function() {
    return (
        <div className="col-md-3 col-xs-6 text-center">
            <p className="leading-stats-number"><i className="fa fa-users"></i> {this.props.value}</p>
            <p className="pages-number-compare"><small><i className="fa fa-arrow-circle-up"></i> compare</small></p>
            <p className="pages-number-text"><small>{this.props.name}</small></p>           
        </div>
    );
  }
});

直到这里一切都很好，但我的目标是在图像中的红色突出显示区域内显示第二个调用的结果，如：

var FirstLineBox = React.createClass({
  render: function() {
    return (
        <div className="col-md-3 col-xs-6 text-center">
            <p className="leading-stats-number"><i className="fa fa-users"></i> {this.props.data.value}</p>
            <p className="pages-number-compare"><small><i className="fa fa-arrow-circle-up"></i> {this.props.data_compare.value}</small></p>
            <p className="pages-number-text"><small>{this.props.data.name}</small></p>              
        </div>
    );
  }
});

这可以实现吗？我可以控制Json的响应并将调用合并为一个，但是我更愿意单独处理它。

Answer 1

所以问题解决了：我不可能完成我想做的事情。

我解决它的方法是事先做2次调用，合并并循环它。

其他方式是在循环中进行单独调用，但在我的情况下它不是一个选项。

谢谢大家。