时间戳

首页 > 解决方案 > 每秒更新一次反应状态

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 swap = (arr, i, j) => {
 console.log(i, j)
 let temp = arr.datasets[0].data[i];
 arr.datasets[0].data[i] = arr.datasets[0].data[j];
 arr.datasets[0].data[j] = temp;
 return arr
}

我的数据有这个形状

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来做，同样的事情发生了。排序是 bieng 执行的，但似乎setData没有执行，因为下面的代码只执行一次

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

谁能告诉我我错过了什么。

标签： reactjs

解决方案

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

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

推荐阅读