javascript - React setstate 搞乱了我的算法吗？

Question

我是 react 新手，并且已经实现了一个简单的视觉选择排序。每当单击按钮时我都会运行选择排序。根据我的理解，整个算法应该运行，并且一键即可对数据进行排序。但是，需要单击多次按钮才能对整个数据进行排序。我假设这是由于在我的选择排序函数调用中 react 更新状态并呈现新组件。

非常感谢任何帮助!

class Square extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: null,
            heightSet: 3,
            sorted: false,
        };
    }
  render() {
    var myheight = this.props.heightSet + 'em';
    var sort = this.props.sorted;
    var bgcolor = 'grey';
    var key = this.props.value;
      if (sort){
          bgcolor = 'green';
      }
      else{
          bgcolor = 'grey';
      }
    var divHeightStyle = {
    height: myheight,
    backgroundColor: bgcolor,
    };
    return (
      <div
        id={this.props.value}
        value={this.props.heightSet}
        style={divHeightStyle}
        className="square">
        {this.props.value}
      </div>
    );
  }
}

class Rectangle extends React.Component {
    constructor(props){
        super(props);
    };





    render(){
        return (
            <button
                className="rectangle"
                onClick={() => this.props.selectionSort()} >
            </button>
        )

    }
}

class Board extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            squares: [],
            sorted: [],
        };
        const min = 1;
        const max = 80;
        const rand1 = min + Math.random() * (max - min)
        const rand2 = min + Math.random() * (max - min)
        const rand3 = min + Math.random() * (max - min)
        const maxbars = 50;
        for(let i=0; i<maxbars; i++){
            let rand = min + Math.random() * (max - min)
            this.state.squares[i] = rand;
            this.state.sorted[i] = false;
        }

    }
  renderSquare(i, y, z) {
    return <Square value={i} heightSet={y} sorted={z}/>;
  }


    selectionSort(){
        let i, j, min_idx;
        let finished = 0;
        for(let i=0; i<11; i++)
        {
            min_idx = i;
            for(let j=i+1; j < 12; j++)
            {
                if(this.state.squares[j] < this.state.squares[min_idx])
                {
                    min_idx = j;
                    let temp = this.state.squares[min_idx];
                    this.state.squares[min_idx] = this.state.squares[i];
                    this.state.squares[i] = temp;

                    this.state.sorted[finished] = true;
                    finished++;
                    this.setState({ squares: this.state.squares
                                  })
                    this.setState({ sorted: this.state.sorted

                    })
                }
            }

        }

    }

    renderRectangle() {
        return <Rectangle
        selectionSort={this.selectionSort.bind(this)}
        />;
    }

    render() {
    const status = '';

    return (
      <div>
        <div className="rec-wrapper">
        {this.renderRectangle()}
        </div>
        <div className="status">{status}</div>
        <div className="board-row">
          <div className="square-wrapper">
          {this.renderSquare(1,this.state.squares[0],this.state.sorted[0])}
          {this.renderSquare(2,this.state.squares[1],this.state.sorted[1])}
          {this.renderSquare(3,this.state.squares[2],this.state.sorted[2])}
          {this.renderSquare(4,this.state.squares[3],this.state.sorted[3])}
          {this.renderSquare(5,this.state.squares[4],this.state.sorted[4])}
          {this.renderSquare(6,this.state.squares[5],this.state.sorted[5])}
          {this.renderSquare(7,this.state.squares[6],this.state.sorted[6])}
          {this.renderSquare(8,this.state.squares[7],this.state.sorted[7])}
          {this.renderSquare(9,this.state.squares[8],this.state.sorted[8])}
          {this.renderSquare(10,this.state.squares[9],this.state.sorted[9])}
          {this.renderSquare(11,this.state.squares[10],this.state.sorted[10])}
          {this.renderSquare(12,this.state.squares[11],this.state.sorted[11])}
          </div>
        </div>
      </div>
    );
  }
}

Answer 1

您正在直接改变状态，这是您不应该做的。

this.state.squares[i] = rand;
this.state.sorted[i] = false;

应该是

const squares = [...this.state.squares];
squares[i] = rand;

const sorted = [...this.state.sorted];
sorted[i] = false;

this.setState({
  squares: squares,
  sorted: sorted  
});