Блог

Главная - Вопросы по программированию - После сброса массива цвет полосок остается зеленым

После сброса массива цвет полосок остается зеленым

#javascript #reactjs

Вопрос:

 import React, {
  useEffect,
  useState
} from "react";
import "./sortingVisualiser.css";

const rnadomIntFromInterval = (min, max) => {
  return Math.floor(Math.random() * (max - min   1)   min);
};

function waitforme(milisec) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("");
    }, milisec);
  });
}

const SortVisualiser = () => {
  const [array, setArray] = useState([]);

  const resetArray = () => {
    const arr = [];
    for (let i = 0; i < 10; i  ) {
      arr.push(rnadomIntFromInterval(5, 600));
    }
    setArray(arr);
  };
  useEffect(() => {
    resetArray();
  }, []);

  const bubbleSort = async() => {
    const a = document.getElementsByClassName("array-bar");
    let i = 0;

    for (i = 0; i < a.length; i  ) {
      for (let j = 0; j < a.length - i - 1; j  ) {
        a[j].style.background = "blue";
        a[j   1].style.background = "blue";

        if (parseInt(a[j].style.height) >= parseInt(a[j   1].style.height)) {
          await waitforme(1000);
          let temp1 = a[j].style.height;
          let temp2 = a[j   1].style.height;
          temp1 = temp1.substring(0, temp1.length - 2);
          temp2 = temp2.substring(0, temp2.length - 2);
          a[j   1].style.height = `${parseInt(temp1)}px`;
          a[j].style.height = `${parseInt(temp2)}px`;
        }
        a[j].style.background = "Turquoise";
        a[j   1].style.background = "Turquoise";
      }
      a[a.length - 1 - i].style.background = "green";
    }
    a[0].style.background = "green";
  };

  return ( <
    div className = "array-container" > {
      array.map((value, idx) => {
        return ( <
          div className = "array-bar"
          style = {
            {
              backgroundColor: "Turquoise",
              height: `${value}px`
            }
          }
          key = {
            idx
          } >
          < /div>
        );
      })
    } <
    button onClick = {
      resetArray
    } > Generate New Array < /button> <
    button onClick = {
      () => bubbleSort()
    } > Bubble Sort < /button> <
    /div>
  );
};

export default SortVisualiser; 
 **
  const resetArray = () => {
    const arr = [];
    for (let i = 0; i < 10; i  ) {
      arr.push(rnadomIntFromInterval(5, 600));
    }
    setArray(arr);
When I am resetting the array I am getting the previous green color not the default color**
 
 **  useEffect(() => {
    resetArray();
  }, []);
Here I am initialising the array when the component mounts**
 
 **  a[j].style.background = "blue";
        a[j   1].style.background = "blue";
Here I am changing the currently comparing elements to blue**
 
 **   a[j   1].style.height = `${parseInt(temp1)}px`;
          a[j].style.height = `${parseInt(temp2)}px`;
Here I am updating the heights of current swapped bars**
 
 ** a[j].style.background = "Turquoise";
        a[j   1].style.background = "Turquoise";
Here I am changing back the colors of swapped bars to default color**
 
 **a[a.length - 1 - i].style.background = "green";
Setting the color of sorted bar to green**

**кнопка onClick = {
Сброс
} > Создать новый массив >< /кнопка> < /кнопка>
() => Пузырьковая сортировка()
} > Сортировка пузырьков >< /кнопка>
Теперь после сортировки массива мне нужно сбросить массив, но когда я сбрасываю массив
Я получаю полосы зеленого цвета, которых не должно быть, потому что при сбросе массива я обновляю переменную состояния, которая повторно отображает компонент, поэтому, когда я повторяю итерацию по массиву, я должен получить полосы бирюзового цвета, но вместо этого я получаю полосы зеленого цвета **

Ответ №1:

Вы изменяете встроенные стили уже в своей bubbleSort функции. И снова после повторной отправки он принимает более старое значение встроенных стилей. Одним из решений может быть отключение div и повторная визуализация. Или обходным решением на данный момент было бы снова изменить стили, как показано ниже. И вызовите эту функцию в своей resetArray() функции

   const resetColor = () => {
    const a = document.getElementsByClassName("array-bar");
    for (let i = 0; i < a.length; i  ) {
      for (let j = 0; j < a.length - i - 1; j  ) {
        a[j].style.background = "Turquoise";
        a[j   1].style.background = "Turquoise";
      }
    }
  }
Метки: