Arrays 气泡排序可视化工具的大小调整和按钮按下问题

我正在制作React中的气泡排序可视化工具

我已经做过了，它可以工作了，但我想要的是它有响应性，所以我让条数缩小，我用宽度除以14，因为一条条条的宽度是8px，右边的边距是6px，但当我点击按钮时，直到我调整它的大小它才会工作，当我调整它的大小时，它就会工作

这是我的组件SortingVisualization.js

import React, { Component } from "react";
import bubbleSort from "../algorithms/bubbleSort";

function sleep(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

class SortingVisualizer extends Component {
  constructor(props) {
    super(props);

    this.state = {
      list: [],
      numberOfBars: 100,
      widthOfBars: 8,
      width: 0,
      height: 0,
    };

    this.bubbleSortImp = this.bubbleSortImp.bind(this);
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
    this.updateNumberOfBars = this.updateNumberOfBars.bind(this);
    this.randomArray = this.randomArray.bind(this);
  }

  componentDidMount() {
    this.updateWindowDimensions();
    window.addEventListener("resize", this.updateWindowDimensions);
    this.updateNumberOfBars();
    window.addEventListener("resize", this.updateNumberOfBars);
    this.randomArray();
    window.addEventListener("resize", this.randomArray);
  }

  componentWillUnmount() {
    window.removeEventListener("resize", this.updateWindowDimensions);
    window.removeEventListener("resize", this.updateNumberOfBars);
    window.removeEventListener("resize", this.randomArray);
  }
  updateWindowDimensions() {
    this.setState({ width: window.innerWidth, height: window.innerHeight });
  }

  updateNumberOfBars() {
    let num = Math.floor(this.state.width / 15);
    this.setState({ numberOfBars: num });
  }

  randomArray() {
    let arr = [];
    for (let i = 0; i < this.state.numberOfBars; i++) {
      arr.push(this.randomNumber());
    }

    this.setState({ list: [...arr] });
  }

  randomNumber() {
    let randomIndex = Math.floor(Math.random() * 100) + 1;

    return randomIndex;
  }
  async bubbleSortImp(e) {
    e.preventDefault();

    let arr = this.state.list;
    let len = this.state.list.length;

    for (let i = 0; i < this.state.numberOfBars; i++) {
      await sleep(50);
      bubbleSort(arr, 0, len - 1);
      this.setState({ list: [...arr] });
    }
  }

  render() {
    console.log(this.state.numberOfBars);
    console.log(this.state.width);
    return (
      <>
        <div className="sortingVisualizer">
          {this.state.list.map((number, index) => (
            <div
              key={index}
              style={{
                height: `${number}` * 5,
                width: this.state.widthOfBars,
              }}
              className="visualize"
            ></div>
          ))}
        </div>
        <div className="buttons">
          <button className="btn" onClick={this.bubbleSortImp}>
            Bubble Sort
          </button>
        </div>
      </>
    );
  }
}

export default SortingVisualizer;

import React，{Component}来自“React”；
从“./算法/bubbleSort”导入bubbleSort；
功能睡眠（ms）{
返回新承诺（（resolve）=>setTimeout（resolve，ms））；
}
类排序可视化工具扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名单：[]，
条数：100，
杆的宽度：8，
宽度：0，
高度:0,，
};
this.bubbleSortImp=this.bubbleSortImp.bind（this）；
this.updateWindowDimensions=this.updateWindowDimensions.bind（this）；
this.updateNumberOfBars=this.updateNumberOfBars.bind（this）；
this.randomArray=this.randomArray.bind（this）；
}
componentDidMount（）{
this.updateWindowDimensions（）；
window.addEventListener（“resize”，this.updateWidowDimensions）；
this.updateNumberOfBars（）；
window.addEventListener（“resize”，this.updateEnumberOfBars）；
这是一个.randomArray（）；
addEventListener（“resize”，this.randomArray）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updateWind维）；
removeEventListener（“resize”，this.updateEnumberOfBars）；
removeEventListener（“resize”，this.randomArray）；
}
updateWindowDimensions（）{
this.setState（{width:window.innerWidth，height:window.innerHeight}）；
}
updateNumberOfBars（）{
设num=Math.floor（this.state.width/15）；
this.setState（{numberOfBars:num}）；
}
随机数组（）{
设arr=[]；
for（设i=0；i(
))}
气泡排序
);
}
}
导出默认排序可视化工具；

这是我的bubbleSort.js

let i = 0;
let j = 0;

const bubbleSort = (arr) => {
  if (i < arr.length) {
    for (let j = 0; j < arr.length - i - 1; j++) {
      let a = arr[j];
      let b = arr[j + 1];
      if (a > b) {
        swap(arr, j, j + 1);
      }
    }
  }
  i++;
};

const swap = (arr, a, b) => {
  let temp = arr[a];
  arr[a] = arr[b];
  arr[b] = temp;
};

export default bubbleSort;

设i=0；
设j=0；
常量bubbleSort=（arr）=>{
如果（ib）{
掉期（arr、j、j+1）；
}
}
}
i++；
};
常量交换=（arr，a，b）=>{
设温度=arr[a]；
arr[a]=arr[b]；
arr[b]=温度；
};
导出默认bubbleSort；

下面是正在发生的事情的视频

这是GitHub回购

---

我在您的实现中发现了一些问题，并相应地修改了代码。请参考下面的组件代码和帮助程序bubbleSort代码。希望这有助于解决您的问题

最初排序不起作用，因为在

componentDidMount

中，您正在使用计算的

width

设置

numberOfBars

，但到那时，该宽度在该状态下没有得到更新，因此默认值为

0

。这使

numberOfBars

变为

0

在实用方法中，一旦

i>=array.lenth

值未重置为

0

，排序就不会发生。发现这些问题并相应地更新代码

下面是排序可视化工具的更新代码

//SortingVisualizer.js
从“React”导入React，{Component}；
从“./算法/bubbleSort”导入bubbleSort；
功能睡眠（ms）{
返回新承诺（resolve=>setTimeout（resolve，ms））；
}
类排序可视化工具扩展组件{
建造师（道具）{
超级（道具）；
此.state={
名单：[]，
条数：100，
杆的宽度：8，
宽度：window.innerWidth，
高度：window.innerHeight
};
this.bubbleSortImp=this.bubbleSortImp.bind（this）；
this.updateWindowDimensions=this.updateWindowDimensions.bind（this）；
this.randomArray=this.randomArray.bind（this）；
}
getDerivedStateFromProps=（下一步，上一步）=>{
如果(
prevState.width！==window.innerWidth||
prevState.height！==window.innerHeight
) {
返回{
宽度：window.innerWidth，
高度：window.innerHeight
};
}
};
componentDidMount（）{
this.updateWindowDimensions（）；
window.addEventListener（“resize”，this.updateWidowDimensions）；
这是一个.randomArray（）；
addEventListener（“resize”，this.randomArray）；
}
组件将卸载（）{
removeEventListener（“resize”，this.updateWind维）；
removeEventListener（“resize”，this.randomArray）；
}
updateWindowDimensions（）{
常量宽度=window.innerWidth；
设num=数学地板（宽度/15）；
此.setState（（）=>({
宽度，
高度：window.innerHeight，
numberOfBars:num
}));
}
随机数组（）{
设arr=[]；
for（设i=0；i（{list:[…arr]}））；
}
随机数（）{
让randomIndex=Math.floor（Math.random（）*100）+1；
回归指数；
}
异步bubbleSortImp（e）{
e、 预防默认值（）；
设arr=this.state.list；
设len=this.state.list.length；
F