Блог

Я создаю простое приложение для визуализации алгоритмов сортировки в 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>
  

Когда я нажимаю кнопку в первый раз, ничего не происходит, массив не рандомизируется. Однако после этого она работает хорошо. Если я нажимаю кнопку во второй раз, она становится случайной. Если я нажимаю на нее в третий раз, она снова рандомизируется, как и должно быть. Это не имеет никакого эффекта в первый раз. Любая помощь была бы оценена.

Проблема в этих строках в вашей randomize функции:

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

Вы устанавливаете значение HeightsArray и используете его сразу, но оно не будет обновлено до следующего рендеринга.
Итак, вам нужно изменить вторую строку на:

 setArray(ArrayList(randomList));