ReactJS:如何将for循环设置为每秒循环一次?

m4pnthwp  于 2023-03-08  发布在  React
关注(0)|答案(1)|浏览(211)

我试图建立一个排序算法可视化工具,它将数组的值表示为矩形,每个元素的值对应不同的高度。它应该显示算法过程的每一步,每一个循环发生在一秒之后。然而,每当网页加载时,数组已经排序。我想使它在每一秒之后,被排序的矩形的位置会改变,这样排序算法的每一步都会显示出来。2我的代码如下:

    • 索引. tsx**
import SortingAlgorithm from '@/components/sorting-algorithm'
import { Inter } from 'next/font/google'

const App: React.FC = () => {
  return(
    <div className='headerContainer'>
      <h1 className='header'>🆂🅾🆁🆃🅸🅽🅶 🅰🅻🅶🅾🆁🅸🆃🅷🅼 🆅🅸🆂🆄🅰🅻🅸🆉🅴🆁</h1>
      <SortingAlgorithm />
    </div>
  )
}

export default App;
    • 排序算法. tsx**
import { Inter } from 'next/font/google'
import React, { useState, useEffect } from 'react'

const SortingAlgorithm: React.FC = () => {
  const [arr, setArr] = useState<number[]>([3, 1, 2, 5, 4]);

  //Selection sort
  while (arr != arr.sort()) {
    useEffect(() => {
      for (let i = 0; i < arr.length; i++) {
        const loop = setTimeout(() => {
        let minIndex: number = i;
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[j] < arr[minIndex]) {
            minIndex = j;
          }
        }
        let temp: number = arr[i];
        arr[i] = arr[minIndex];
        arr[minIndex] = temp;
        }, 1000);

        return() => clearTimeout(loop);
      }
    }, []);
  }
  
  return arr.map<JSX.Element>((keys) => (
    <div className='barsContainer'>
      <svg className='bars'>
        <rect height={keys * 25} width={100 - (arr.length * 10)} x={arr.indexOf(keys) * 53} y={0}/>
      </svg>
    </div>
  ))
}

export default SortingAlgorithm;

我已经在包含排序算法的for循环中实现了setTimeout。我认为这将是我的问题的完美解决方案,但它似乎并没有改变for循环的循环速度。我也尝试过修改语法,但这似乎并没有真正产生什么影响。至少在正确的方向上指出一点会非常感激。

fnx2tebb

fnx2tebb1#

下面是full solution的示例实现。
下面,请看这个最小的示例,其中包含一个计数器,它以最基本的形式演示了您要完成的任务:

import React, { useEffect, useState } from "react";
function() {

  const [state, setState] = useState(0);

  useEffect(() =>{
    const id = setTimeout(() => {
      setState(state + 1);
    }, 500);
    return () => clearTimeout(id);
  }, [state])

  return (
    <div>
      <span>Counter</span>
      {` `}
      {state}
    </div>
  );
});

关于钩子的几点注意事项:
1.不要在控制流结构中使用钩子,如ifwhile等。每次执行react函数时都必须执行钩子,以使它们正常工作。如果检查开发控制台,您可能会看到React警告或错误。

  1. React依赖于setState来知道何时更新组件。由于您从不调用setArr,因此您的组件永远不会更新。请参见setState
    考虑阅读the full documentation on hooks,这样您就可以完全理解它们的预期用途。

相关问题