Сollect promises results in foreach loop and only after performing setState

Question

I am new to React and Promises.

My purpose is - Collect array of objects from several Search Services and then transfer whole array to the State.

PNP.SearchResults is a Promise

In code below this.setState is performing earlier then array is ready. How to fix it?

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");
}

Now console.log("state updated") fires earlier then console.log("push"). But I need vice versa

Answer 1

Because of this.props.searchService.search is async function.

You should await result to make sure data return.

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");
}