Reactjs React JS2调用相同的组件

我是新手，我尝试使用.map循环一组Json对象。我使用Ajax进行了两次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} />
      );
    }
}); 

var firstLine=this.props.data.map（函数（度量）{
如果（metric.line==1）{
返回(
);
}
}); 

还有第一行框

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（）{
返回(
{this.props.value}
比较

{this.props.name}
);
}
});

在这里之前一切都很好，但我的目标是在图像中红色突出显示的区域内获得第二次调用的结果，类似于：

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

var FirstLineBox=React.createClass({
render:function（）{
返回(
{this.props.data.value}
{this.props.data\u compare.value}
{this.props.data.name}
);
}
});

---

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

因此问题得到了解决：不可能完成我试图做的事情

我解决这个问题的方法是事先做两个调用，合并并循环它

另一种方法是在循环内进行单独调用，但在我的情况下，这不是一种选择

谢谢大家