我试图建立一个排序算法可视化工具，它将数组的值表示为矩形，每个元素的值对应不同的高度。它应该显示算法过程的每一步，每一个循环发生在一秒之后。然而，每当网页加载时，数组已经排序。我想使它在每一秒之后，被排序的矩形的位置会改变，这样排序算法的每一步都会显示出来。2我的代码如下：

• • 索引. tsx**

import SortingAlgorithm from '@/components/sorting-algorithm'
import { Inter } from 'next/font/google'

const App: React.FC = () => {
  return(
    <div className='headerContainer'>
      <h1 className='header'>🆂🅾🆁🆃🅸🅽🅶 🅰🅻🅶🅾🆁🅸🆃🅷🅼 🆅🅸🆂🆄🅰🅻🅸🆉🅴🆁</h1>
      <SortingAlgorithm />
    </div>
  )
}

export default App;

• • 排序算法. tsx**

import { Inter } from 'next/font/google'
import React, { useState, useEffect } from 'react'

const SortingAlgorithm: React.FC = () => {
  const [arr, setArr] = useState<number[]>([3, 1, 2, 5, 4]);

  //Selection sort
  while (arr != arr.sort()) {
    useEffect(() => {
      for (let i = 0; i < arr.length; i++) {
        const loop = setTimeout(() => {
        let minIndex: number = i;
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[j] < arr[minIndex]) {
            minIndex = j;
          }
        }
        let temp: number = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
        }, 1000);

        return() => clearTimeout(loop);
      }
    }, []);
  }
  
  return arr.map<JSX.Element>((keys) => (
    <div className='barsContainer'>
      <svg className='bars'>
        <rect height={keys * 25} width={100 - (arr.length * 10)} x={arr.indexOf(keys) * 53} y={0}/>
      </svg>
    </div>
  ))
}

export default SortingAlgorithm;

我已经在包含排序算法的for循环中实现了setTimeout。我认为这将是我的问题的完美解决方案，但它似乎并没有改变for循环的循环速度。我也尝试过修改语法，但这似乎并没有真正产生什么影响。至少在正确的方向上指出一点会非常感激。