是否可以从地图函数中调用提取API？

Question

我有一个map函数可以构建这样的jsx（简化版）：

followingBlurts = this.props.blurts.map((item, index) => (
   <div className='blurt-panel' key={index}>
        <span>
           {this.getBlurtImg(item.author.id)}
        </span>
        <Sanitizer dirty={ item.text } cssClass='blurt-panel-body' />
   </div>
));

getBlurtImg是一个调用api的函数，该api提取图像的文件名：

getBlurtImg(id) {
    var imgName = '';
    imgapi.getSmallProfileImg(id).then((data) => {
        imgName = data.name;
        return <img src={'/images/profiles/' + imgName}></img>
    });
}

这不适用于一个人，因为getBlurtImg不是一个承诺，但是我相信这里还有其他问题。例如，map函数本身不是异步的，因此无论如何都会继续迭代。

此后，我决定修改初始api，以便它返回带有包的图像名称。但是，我在考虑可能需要在map循环内调用api的其他实例，而我想知道如何做到这一点？