递归异步/等待崩溃 React App

Question

我正在尝试创建一个 React 应用程序，该应用程序使用各种参数对各种排序算法进行建模。 我试图在算法的每一步创建一个可变延迟，以便让它以人类可以理解的速度发生。 我写了这个睡眠函数来做到这一点：

sleep = (ms = this.state.delay) => {
return new Promise(resolve => setTimeout(resolve, ms));
}

然后创建一个async排序函数，根据需要await this.sleep()。 它适用于气泡排序、选择排序和插入排序，但是当我尝试合并排序时应用程序崩溃。 我认为这是由于递归，但我非常困惑。

async mergeSort(arr) {
if(arr.length < 2) {
return arr;
}
const m = Math.floor(arr.length / 2);
let left = arr.slice(0, m);
let right = arr.slice(m);
await this.sleep();
return this.merge(this.mergeSort(left), this.mergeSort(right));

}
async merge(left, right) {
let result = [];
while(left.length && right.length) {
if(left[0].props.number <= right[0].props.number) {
result.push(left.shift());
} else {
result.push(right.shift());
}
await this.sleep();
}
while(left.length) {
result.push(left.shift());
await this.sleep();
}
while(right.length) {
result.push(right.shift());
await this.sleep();
}
return result;
}

这是我得到的错误：

Objects are not valid as a React child (found: [object Promise]). 
If you meant to render a collection of children, use an array instead.

但是我没有将承诺分配为要渲染的元素，所以我不确定出了什么问题。

编辑：这是渲染方法：

render() {
let {sorted, hatArray, sortingMethod, startTime, endTime, numberOfHats, sorting} = this.state;
return (
<div>
<SortMenu 
onOptionSelect={this.onOptionSelect} 
onSortBtn={this.onSortBtn} 
onHatInputChange={this.onHatInputChange}
updateHatArray={this.updateHatArray}
setDelay={this.setDelay}
sorting={sorting}
/>
<Modal 
open={sorted} 
onClose={this.onCloseModal} 
classNames={{
modal: 'custom-modal',
closeIcon: 'modal-close-button'
}}
center 
>
<h1>Sorting Complete!</h1>
<p>{`${sortingMethod} sorted ${numberOfHats} hats in ${(endTime - startTime) / 1000} seconds.`}</p>
</Modal>
<div id="hat-box">
{hatArray}
</div>
</div>
);
}

Answer 1

解决了！ 感谢用户3210641和Lyosha Korogada的输入。

我更改了合并排序，因此它不返回值，而是更改另一个数组。 然后，我边走边将状态设置为该数组。

如果将 sleep 函数放在merge()函数中，它会弄乱排序顺序，但我能够以可变的秒数将其放入mergeSort()函数中以达到相同的结果。

async mergeSort(l, r) {
if(l < r) {
console.log(l);
const m = Math.floor((l + r) / 2);
this.mergeSort(l, m);
this.mergeSort(m + 1, r);
await this.sleep((r - l) * this.state.delay);
this.merge(l, m, r);    
}
}
merge(l, m, r) {
let left = this.globalHatArray.slice(l, m + 1);
let right = this.globalHatArray.slice(m + 1, r + 1);
let ptr = l;
while(left.length && right.length) {
if(left[0].props.number <= right[0].props.number) {
this.globalHatArray[ptr] = left.shift();
} else {
this.globalHatArray[ptr] = right.shift();
}
ptr++;
}
while(left.length) {
this.globalHatArray[ptr] = left.shift();
ptr++;
}
while(right.length) {
this.globalHatArray[ptr] = right.shift();
ptr++;
}
this.setState({hatArray: this.globalHatArray});
}