React功能组件:如何在循环中多次setState

Question

在循环中，如何像循环一样多次更新状态?在下面的例子中，updateDataset()只在循环结束时更新状态。是否有一种方法可以更新状态以及循环发生的次数，以便应用程序重新渲染每一轮循环

const [dataset, updateDataset] = useState([]);
function bubbleSort() {
//how many rounds of comparison
var sortedArray = dataset.slice();
for (var i = sortedArray.length; i > 0; i--) {
//how many comparison pair
for (var j = 0; j < i - 1; j++) {
// console.log(arr, arr[j], arr[j + 1]);
//always compare one to the next one, that is why j+1
if (sortedArray[j] > sortedArray[j + 1]) {
//swap the value
var temp = sortedArray[j];
sortedArray[j] = sortedArray[j + 1];
sortedArray[j + 1] = temp;
//update state
updateDataset(sortedArray.slice())

}
}
}
}

Answer 1

是否有一种方法可以更新状态以及循环发生的次数，以便应用程序重新渲染每一轮循环

JS只有一个事件循环，阻塞代码(如循环)将是JS正在做的一件事。任何状态更改都将被排队，直到事件循环空闲。

你可以做的是用一个递归函数来替换这个循环，这个递归函数用一个计时器来调用自己:

const example = (data, countdown) => {
const newData = doStuffWith(data);
if (countdown > 0) {
setTimeout(example, 500, newData, countdown - 1);
}
}

…但是要非常非常小心，你不会以两个example的实例重叠而结束(从单独的调用到第一次运行它的任何东西)。