javascript - Сollect 承诺会导致 foreach 循环，并且仅在执行 setState 之后

Question

我是 React 和 Promises 的新手。

我的目的是 - 从几个搜索服务收集对象数组，然后将整个数组传输到状态。

PNP.SearchResults是一个承诺

在下面的代码中this.setState执行较早，然后数组已准备就绪。如何解决？

private getSearchResults() {
    const allSearchResults = []

    this.state.resultSources.forEach(rSource =>{
      this.props.searchService.search(this.props.AdditionalQuery, this.state.activePage, this.props.PageSize, rSource.sourceGuid).then((results: PNP.SearchResults) => {
          allSearchResults.push({Results: results, sourceGuid: rSource.sourceGuid});
          console.log("push");
      }).catch(() => {});
    })

    this.setState({PrimaryResults2: allSearchResults} as any);
    console.log("state updated");
}

现在console.log("state updated")就早点开火console.log("push")。但我需要反过来

标签： javascriptreactjstypescriptasynchronouses6-promise

Answer 1

因为this.props.searchService.search是异步功能。

您应该等待结果以确保数据返回。

private async getSearchResults() {
    const allSearchResults = []

    for (const rSource of this.state.resultSources) {
        await this.props.searchService.search(this.props.AdditionalQuery, this.state.activePage, this.props.PageSize, rSource.sourceGuid).then((results: PNP.SearchResults) => {
            allSearchResults.push({Results: results, sourceGuid: rSource.sourceGuid});
            console.log("push");
        }).catch(() => {});
    }

    this.setState({PrimaryResults2: allSearchResults} as any);
    console.log("state updated");
}