Javascript 使用React可视化算法-我做错了什么？

我正在尝试创建一个可视化流行算法的网站——我正在使用React（与盖茨比一起）。我从一个正在工作的冒泡排序算法开始，但是当我使用react state和

setTimeout

来更新脚本每个循环上的视图时，有一些不太正确的地方。我不知道到底是什么问题，但我想知道这是否与循环中状态更新的方式有关

我知道该函数工作正常，因为如果我不使用

setTimeout

，则所有内容都会进行完美排序（这可以通过“立即排序数组”按钮进行演示）。如果我双击Sort Array Visualize按钮，那么排序几乎可以正常工作——两次单击之间的延迟越大，错误就越多

以下是该网站的链接-

以下是代码的链接-

有人知道问题是什么吗

下面是正在调用的函数的代码：

let array = [...arr]
async function wait() {
return new Promise(function (resolve) {
setTimeout(resolve, 0);
});
}

for(var i = 0; i < array.length; i++) {
for(var j = 0; j < array.length; j++) {

if(array[i] > array[j]) {
await wait();
let temp = array[i];
array[i] = array[j]
array[j] = temp;
setArr(array);
}
}
}

let数组=[…arr]
异步函数wait（）{
返回新承诺（函数（解析）{
setTimeout（解析，0）；
});
}
对于（var i=0；i数组[j]）{
等待等待；
设temp=array[i]；
数组[i]=数组[j]
数组[j]=温度；
setArr（阵列）；
}
}
}

为了在每次迭代中可视化，我添加了一个带有数字的

数组

，并将

setArr（）

更改为在代码中有一个

console.log（）

，用于替换解决方案中的排序表示，可以在下面找到：

（函数（）{
异步函数排序（）{
//让数组=[…arr]//原始数组
设数组=[4,5,6,34,3,23324,23345,34]；
函数等待（毫秒）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
对于（var i=0；i数组[j]）{
等待等待（200）；
设temp=array[i]；
数组[i]=数组[j]
数组[j]=温度；
//setArr（array）；//从示例中删除
console.log（数组）；//为表示添加了日志记录
}
}
}
}
排序（）；
})();尝试从组件中拉出该函数，并传入该函数以将状态设置为参数。我认为这可能是因为每次渲染时都会创建一个新函数，这是在设置状态时发生的。谢谢，虽然此解决方案确实有效（并且可能是我最终使用的），但它并没有回答使用React state时的问题。我想这只是某种描述的异步问题。