Reactjs 每秒钟更新一次反应状态

我正在尝试制作一个排序算法可视化工具，但我一直坚持每秒呈现一个新的状态

下面是我所做的，我有一个函数

bubbleSort

，它对数组执行冒泡排序，当用户单击开始按钮时调用

const bubbleSort = () => {
setSorting(true)
console.log(sorting)
let attemp = 10
let temp = 0
let counter = 1
while(attemp > 0){
  attemp = 0
  for (let i = 0; i < data.datasets[0].data.length - 1; i++) {
    if(data.datasets[0].data[i] > data.datasets[0].data[i+1]){
      const newBars = data
      var interval = setInterval(() => {
        setData(swap(newBars, i, i + 1));
      }, 500 * i * counter)
    }
}
  counter++
}

//clearInterval(interval)
}

我的数据是这样的

const sortData = {
labels: ['','','','','','','','','','','','','','','','','','','','','','','','',''],
datasets: [
  {
    label:  `${sortNames[sort]} sort`,
    backgroundColor: [
      chartColors.default,
      chartColors.default,
      chartColors.default,
      chartColors.default
    ], 
    borderWidth: 1,
    hoverBackgroundColor: '#fff',
    hoverBorderColor: '#0a2ea9',
    barPercentage:1,
    data: [65, 59, 80, 81, 56, 70, 72, 89, 23, 11, 4, 92, 87, 84, 50, 57, 59, 44, 49, 39, 35, 32, 0]
  }
]
}

ps：我试着用setTimeout来做，同样的事情也发生了。 正在执行排序，但似乎未执行

setData

，因为下面的代码只执行一次

useEffect(() => {
 console.log('updated')
}, [])

---

有人能告诉我我缺少什么吗。

您需要传递第二个参数，如果第二个参数的值发生更改，将触发

useffect

useEffect(() => {
 console.log('updated')
}, [data])

---

只需将数据可视化，react将在需要更新时进行处理。。你不必检查或维护，除了状态。。。react是让事情变得有反应性的东西..检查代码：，这是刚为你烤好的。。。此示例主要演示react状态的工作原理。。你将能够很好地观察到反应的反应性。。如果您还有其他问题，请提问..这是一个排序算法，我想在每个步骤后更新状态。您的useEffect代码段只运行一次，因为您传入了空数组。这样做意味着“当这些东西（在空数组中，没有什么）改变时，再次运行”。由于其中没有任何内容，useEffect不会监视任何状态的更改，因此它只运行一次。@lyes，它将在每一步中更新，只是快速和慢速计算机中的图像执行时间不相等，您可以创建另一个触发器来维护以转到下一步。。

useEffect(() => {
 console.log('updated')
}, [data])