我是reactJS的新手，正在尝试构建排序可视化器。我面临的问题是在实现quickSort（）例程时。
我的quickSort（）例程如下：
async quickSort(array, p, r) {
if(p<r){
this.Partition(array,p,r).then((q)=>{
console.log(p, ' ', r)
this.quickSort(array, p, q-1)
this.quickSort(array,q+1,r)
})
}
}
我使用分区功能使用.then的原因是因为我在动画的分区例程中使用了async / await。然后，分区例程返回分区“ q”的值，然后可以进行递归。分区函数返回一个promise，其值是分区值“ q”，如果没有该值，递归将无法进行，因此“ .then”部分将继续进行。
现在，代码可以正确运行，但是我想添加更多功能。我正在从quickSortHelper（）例程内部调用此quickSort（）例程。在quickSortHelper（）中，我首先禁用按钮，然后调用quickSort（），在quickSort（）完成后，我要再次启用该按钮。但是问题在于，只有在第一次调用quickSort（array，0，n-1）之后，它才会返回，因此该按钮将立即被禁用和启用，而无需等待整个递归的展开。
我尝试从quickSort（）内部返回一个Promise，以确保只有当Promise被解决时，我们才继续启用按钮。但是promise在1-2次迭代后就解决了（这很有意义，因为我认为函数将返回p> r），因此无需等待整个递归完成就可以启用按钮。
对于如何解决这个问题，有任何的建议吗？有没有一种方法可以暂停执行，直到quickSort（）完成，然后继续进行启用按钮的工作？
async quickSortHelper(){
this.setState({generateButton: true})
console.log(this.state.generateButton)
var array = this.state.array
this.quickSort(array, 0, array.length-1 ).then(()=>{
this.setState({array})
this.setState({generateButton: false})
})
}
还有一件事，console.log（this.state.generateButton）输出false。因此，它永远不会将状态设置为true吗？我不明白为什么会这样？
您的quickSort函数当前返回的Promise会立即以undefined的值进行解析。您需要返回一个承诺await及其解决方案。因此，要么继续执行then链（然后您就不需要了async），要么使用async/ await（请参阅下一节）：
function quickSort(array, p, r) {
if (p < r) {
return this.Partition(array,p,r).then((q) => {
// ^^^^^^
console.log(p, ' ', r);
return this.quickSort(array, p, q-1);
// ^^^^^^
}).then(() => {
return this.quickSort(array,q+1,r);
// ^^^^^^
});
}
}
当然，混合async和then有点奇怪，因此您还应该then用以下await语法替换它：
async quickSort(array, p, r) {
if (p < r) {
let q = await this.Partition(array,p,r);
console.log(p, ' ', r);
await this.quickSort(array, p, q-1);
await this.quickSort(array,q+1,r);
}
}
注意：使用分号。依靠自动分号插入可以在您可以自己控制时放弃控制。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句