ReactJS - запрос REST API внутри функции .map?

Question

Как создать повторяющиеся элементы разметки в компоненте React, для которых также требуется запрос REST API для каждого из них? Изначально у меня были вызовы, завершающиеся в цикле for-each в функции componentDidMount. Но это требовало вызова 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
      });
});

Затем визуализируйте this.state в вашей функции render().