在具有时间延迟的循环中反应 setState 不会触发重新渲染答案

【问题标题】：React setState in a loop with time delay is not triggering rerenders在具有时间延迟的循环中反应 setState 不会触发重新渲染
【发布时间】：2022-02-09 14:52:11
【问题描述】：

我正在尝试模仿一个简单的排序算法，并使用 React setState 以 100 毫秒的间隔实时存储排序后的数组（作为“输出”），以便它可以作为算法可视化工具显示在屏幕上.排序后的数组可以显示在控制台中，但 React 状态不会相应地实时更新。我该如何解决这个问题？

  const [output, setOutput] = useState([]);

  const timer = (ms) => new Promise((res) => setTimeout(res, ms));

  const Simple_Sorting_Algo = (n) => {
    const array = [];
    for (var i = 0; i < n; i++) {
      array.push(Math.floor(Math.random() * 1000));  //generating a random array
    }

    const sortedArr = [...array];
    const send = async () => {
      for (let i = 0; i < n; i++) {
        for (let j = i + 1; j < n; j++) {
          if (sortedArr[i] > sortedArr[j]) {
            var tmp = sortedArr[i];
            sortedArr[i] = sortedArr[j];
            sortedArr[j] = tmp;           
            console.log(sortedArr);
            setOutput(sortedArr);
            console.log(output);
            await timer(100);     //delay
          }
        }
      }
    };
    send();
  };

【问题讨论】：

标签： reactjs loops async-await settimeout use-state

【解决方案1】：

您必须不可变地更新状态。

setOutput(sortedArr) 应该是setOutput([...sortedArr])

sort 函数在每次迭代中对数组进行变异，这很好，但你不能使用变异数组来更新状态，因为 React 每次接收到相同的数组时都不会重新渲染组件。

【讨论】：