1

我试图制作一个程序来可视化 ReactJS 中的冒泡排序，我试图在循环内更新数组的状态，但有一些延迟。但是数组的状态只更新一次。我不明白它有什么问题。这种方式在反应中更新状态是错误的吗？

我正在更新 useEffect() 中的数组状态，并通过“onClick”事件调用 bubbleSort()

import {useState, useEffect, useRef} from 'react'

function App() {

  let count = 0;
  const [array, setArray] = useState([])
  const barBoundary = useRef(null)

  useEffect(()=>{
    count = 0;
    setArray(generateArray(1,100,400))
  }, [])


  const generateArray = (min, max,l) => {
    return Array.from({length: l}, () => Math.floor(Math.random() * (max - min) + min));
  }

  const sleep = (milli) => {
    return new Promise(resolve => setTimeout(resolve, milli)
  }

  const bubbleSort = async (speed) => {
    let temp = [...array];
    let len = array.length;
    let checked;
    do {
        checked = false;
        for (let i = 0; i < len; i++) {
            if (temp[i] > temp[i + 1]) {
              
              let tmp = temp[i];
              temp[i] = temp[i + 1];
              temp[i + 1] = tmp;
              await sleep(10)
              setArray(temp)
              checked = true;   
            }
            
        }
    } while (checked);
  }

  return (
    <div className="App">
      
      <div className="container">
        <div className="navbar">
          <ul>
            <li><button onClick={()=> setArray(generateArray(1,100,700))}>Bubble Sort</button></li>
            <li><button onClick={()=>bubbleSort()}>Sort</button></li>
          </ul>
        </div>
        <div className="bar-container">
          <div className="bar-boundary" ref={barBoundary}>
            <div className="bars">
              {
                array.map(item => {
                  return(
                  <div className="bar" key={++count}
                    style={{
                      backgroundColor:"blue",
                      height:`${item}%`,
                    }}
                  >
                  </div>)
                })
              }
            </div>
          </div>
        </div>
      </div>
      
    </div>
  );
}

export default App;
4

1 回答 1

2

这就是问题所在，您的数组指的是同一个实例并且不会重新渲染。从数组创建一个新数组temp并设置状态。有效。

setArray([...temp])
于 2021-05-08T10:40:51.773 回答