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函数创建一个元素数组（divs），其中每个元素具有给定高度数组中的相应高度，如下所示：

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));

ReactJS中的按钮仅在第二次单击后才调用该函数，第一次单击后不起作用

1 个答案: