ReactJS中的按钮只在第二次点击后调用函数，第一次点击后没有效果

Question

我正在构建一个简单的应用程序，用于ReactJS中排序算法的可视化。这是我的功能：

const [HeightsArray, setHeightsArray] = useState([]);
const [Array, setArray] = useState(ArrayList(HeightsArray));

const randomize = ()=>{
const randomList = RandomHeightsList(ArrayLength);
setHeightsArray(randomList);
setArray(ArrayList(HeightsArray));
}

RandomHeightsList函数只是返回一个随机数数组。

const RandomHeightList = (ArrayLength)=>{
let randomHeightsArray = [];
while (randomHeightsArray.length<ArrayLength){
let randomHeight = Math.round(Math.random()*350);
randomHeightsArray.push(randomHeight);
}
return randomHeightsArray;

ArrayList函数创建一个元素数组(div(，其中每个元素从给定的高度数组中具有相应的高度，如下所示：

const ArrayList = (heightsArray) => {
let array = [];
for (let i=0; i<heightsArray.length; i++){
array.push(ArrayElement(heightsArray[i]));
}
return (
<div className="array-list">
{array}
</div>
)
}

最后，数组元素只是一个有一定高度的div。

const ArrayElement = (height) => {
const baseTop = 300;
let top = baseTop-height;
let styleObject = {height: height, top: top};
return (
<div className="array-element" style={styleObject}>
</div>
)
}

现在是我的简单按钮：

<button className="randomize-button" onClick={randomize}>Randomize</button>

当我第一次单击按钮时，没有发生任何事情，数组不会随机化。然而，在那之后，它运行良好。如果我第二次点击按钮，它会被随机化。如果我第三次点击它，它会再次随机出现。第一次没有效果。如有任何帮助，我们将不胜感激。

Answer 1

问题在于randomize函数中的这些行：

setHeightsArray(randomList);
setArray(ArrayList(HeightsArray));

您正在设置HeightsArray的值并立即使用它，但直到下一次渲染才会更新。因此，您需要将第二行更改为：

setArray(ArrayList(randomList));