Estoy practicando reaccionar en este momento, haciendo una aplicación de visualización de clasificación. Estoy atascado con la implementación de la función de clasificación (la idea es agregar un retraso entre las iteraciones para que sea posible ver los cambios en tiempo real).

Hay en mi código un componente de clase que contiene el método bubbleSort() (que llama a function* bSort) y el método render() (que cambia cuando this.state.array cambia en cada iteración de función).

Funciona de esta manera: cuando llamo a bubbleSort(), la matriz de números (que afecta la representación) cambia solo unos.

Por ejemplo:

• Entrada: [5, 4, 1, 2, 3]
• Iteración 1: [4, 5, 1, 2, 3]
• Iteración 2: [4, 5, 1, 2, 3]
• Iteración 3: [4, 5, 1, 2, 3]

Aquí hay una parte de la clase de componente:

 bubbleSorting = () => { for (let i = 0; i < this.state.consequence.length ** 2; i++) { var arr = bubbleSorting(this.state.consequence).next(); this.setState({ consequence: arr.value }); } };

Aquí está debajo de la función del generador:

 export function *bSort (arr: number[]) { let len = arr.length; for (let i = 0; i < len; i++) { for (let j = 0; j < len; j++) { if (arr[j] > arr[j + 1]) { let tmp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = tmp; } yield arr; } } return arr; }; export default bSort;

¿Cómo puedo refactorizar esta parte del código para que funcione?