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

【问题标题】：ReactJS - REST API query inside .map function?ReactJS - .map 函数内的 REST API 查询？
【发布时间】：2018-10-16 04:17:17
【问题描述】：

如何在 React 组件中生成重复的标记元素，这也需要对每个元素进行 REST API 查询？最初，我在 componentDidMount 函数中的 for-each 循环中完成了调用。但这需要在循环内调用 setState，以触发重新渲染。行为不稳定，and apparently that technique is not a good idea.

所以，现在我正试图让查询在我的渲染的 .map 函数中运行（见下文）。但这会产生this error。

有没有办法返回元素值而不是承诺？（可能更多的是 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>);

【问题讨论】：

您能否通过调用ProjectsService.getTaskBaselines 来处理所有查询的最终状态？也许得到所有的结果然后渲染？

标签： javascript reactjs promise

【解决方案1】：

您似乎想查询所有 API，然后在所有 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。

【讨论】：