我试图制作一个程序来可视化 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;
这就是问题所在,您的数组指的是同一个实例,并且不会重新渲染。从temp
数组创建一个新数组并设置状态。有效。
setArray([...temp])
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句