如何解决СollectPromise会导致foreach循环,并且仅在执行setState之后
我是React和Promises的新手。
我的目的是-从多个Search Services收集对象数组,然后将整个数组转移到State。
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")
更早触发。
但反之亦然
解决方法
由于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");
}
,
如果我正确理解,则需要先将搜索结果推送到allSearchResults数组中,然后再推送setState。为什么不使用async await和基本的for循环代替.then。当您使用.then时,仅在.pron解析后,.then回调中的代码才会执行,但是它之外的其他代码(例如this.setState,console.log)将等到您推送所有搜索结果之后。
async func() {
const allSearchResults = [];
for(let i=0; i<this.state.resultSources.length; i+=1){
const item = await this.props.searchService.search(this.props.AdditionalQuery,this.state.resultSources[i].sourceGuid)
allSearchResults.push({Results: item,sourceGuid: this.state.resultSources[i].sourceGuid})
}
this.setState({PrimaryResults2: allSearchResults} as any,() => {console.log("state updated")})
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。