ReactJS - запрос REST API внутри функции .map?
Как мне создать повторяющиеся элементы разметки в компоненте 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>);
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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().
Можете ли вы изменить окончательное состояние всех запросов, позвонив в
ProjectsService.getTaskBaselines? Возможно, получение результатов всего и затем рендеринг?