Рекурсивные асинхронные / ожидающие сбои приложения React

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

Решено!Спасибо user3210641 и Лёше Корогаде за ввод.

Я изменил сортировку слиянием, чтобы она не возвращала значение, а скорее изменила другой массив.Затем я установил состояние для этого массива по ходу процесса.

Если функция сна помещена в функцию 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});
}