상태가 업데이트 될 때마다 요소를 렌더링하는 방법

Question

React를 사용하여 정렬 시각화 도우미를 만들려고합니다. 지금 나는 bubblesort를 구현하고 있으며 정렬의 각 단계에서 배열을보고 싶습니다.

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 })
        }
    }
}