ReactJS-.map函数内的REST API查询？

Question

如何在React组件中生成重复的标记元素，而每个元素也都需要REST API查询？ 最初，我在componentDidMount函数内的for-each循环中完成了调用。 但这需要在循环内调用setState才能触发重新渲染。 行为是不稳定的， 并且显然该技术不是一个好主意。

所以，现在我试图让查询在我的渲染器的.map函数中运行（见下文）。 但这产生了这个错误 。

有没有一种方法可以返回元素值而不是承诺？ （可能更多的是JS问题而不是React问题...）
还是我会以完全错误的方式解决这个问题？

return (<div>   
    {this.props.currentProject.Tasks.map((task => {
        return ProjectsService.getTaskBaselines(this.props.currentProject.PWAGuid, task.TaskId, this.props.context).then((baseline: any): any => {
            return (<div>{task.TaskName}</div>);
        })                                
    }))}
</div>);

Answer 1

似乎您想查询所有API，然后在所有问题解决后处理响应。

尝试这个：

const promises = this.props.currentProject.Tasks.map((task => {
        return new Promise(function(resolve, reject) {
              resolve(task);
        });

Promise.all(promises).then((data) => {
     this.setState({
          // act on all of your data
      });
});

然后在render()函数中渲染this.state 。