javascript - 每次状态更新时如何渲染元素

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