代码之家  ›  专栏  ›  技术社区  ›  Beginner

如何在具有时间延迟的循环中设置状态

  •  1
  • Beginner  · 技术社区  · 4 年前

    我试着做一个程序来可视化ReactJS中的冒泡排序,我试着用一些延迟来更新循环中数组的状态。但是数组的状态只更新一次。我不明白怎么了。这样更新react中的状态是否错误?

    我正在更新useffect()中数组的状态,并通过“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;
    
    1 回复  |  直到 4 年前
        1
  •  2
  •   Amila Senadheera    4 年前

    这就是问题所在,数组引用的是同一个实例,不会重新渲染。从创建新数组 temp

    setArray([...temp])