状態が更新されるたびに要素をレンダリングする方法

Question

Reactを使用してソートビジュアライザーを構築しようとしています。現在、バブルソートを実装しています。ソートの各段階で配列を確認したいと思います。

class Sorter extends Component {
    state = {
          array: [100,4,214,55,11,22,10,33],
    }
     bubblesorter = () => {
        let arr = this.state.array
        var len = arr.length,
        i, j, stop;
            for (i=0; i < len; i++){
                    for (j=0, stop=len-i; j < stop; j++){
                        if (arr[j] > arr[j+1]){
                            swap(arr, j, j+1);
                        } 
                        this.setState({array:arr})
                    }
                }   
    }

    render() {
        const array = this.state.array
        // console.log(array)
        return (
            <div>
                <h1>This is a sorter</h1>
                <div className="container">
                    {array.map((value, id) => (
                        <span>
                            <div className="bar" key={id} style={{height: value+"px"}}  >
                            </div>
                        </span>
                    ))}
                </div>
                <button onClick={this.bubblesorter}>Sort</button>
            </div>
        )
    }

最初は：

「ソート」をクリックした直後：

各反復のループ内でsetStateを使用していますが、最終的にソートされた配列しか表示されません。並べ替えの各ステップで配列をレンダリングしたいと思います（場合によっては時間遅延を使用します）。しかし、私はこれを実装することができません。
誰かがこのような機能を実装するためにこのコードを変更する方法を手伝ってもらえますか...ありがとう

Answer 1

ああ、それは実際に変化し（実行時間は目で検出できるほど速い）、ループに遅延を設定すると表示されます。

例えば：

bubblesorter = async () => {
    let arr = this.state.array
    var len = arr.length,
        i, j, stop;
    for (i = 0; i < len; i++) {
        for (j = 0, stop = len - i; j < stop; j++) {
            if (arr[j] > arr[j + 1]) {
                swap(arr, j, j + 1);
            }
            // Added 1 second delay here.
            await new Promise(resolve => setTimeout(resolve, 1000));
            this.setState({ array: arr })
        }
    }
}