为什么更改状态后排序无法正常工作？

Question

我有BubbleSort组件，但是当我开始排序过程时，出现了问题并且排序工作不正确。我确定算法本身编写正确。我想设置状态过程出了点问题，但无法弄清楚它到底是什么。

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

export default class BubbleSort extends Component{
  state = {
    elements: this.props.elements
  }

    sort = () => {
    const length = this.state.elements.length;
    for (let i = 0; i < length; i++) {
      for (let j = i + 1; j < length; j++) {
        if (this.state.elements[i].value > this.state.elements[j].value) {
          this.swap(i, j);
        }
      }
    }
  }

  swap = (first, second) => {
    this.setState((state) => {
      const newElements = [...state.elements];

      const temp = newElements[first];
      newElements[first] = newElements[second];
      newElements[second] = temp;

      return {
        elements: newElements
      }
    })
  }

  render() {
    const { elements } = this.state;

    return (
      <ArrayView elements={elements} onSort={this.sort} />
    )
  }
}

Answer 1

问题是您每次都交换状态中的元素，而不交换您实际上在sort（本地elements数组）中排序的数组中的元素）。因此，elements中本地sort数组上的后续操作将继续使用旧值，这意味着Bubblesort无法正常工作。

除非您希望组件在每次交换时更新DOM（这意味着对其进行实质性更改），只需更改一次状态，并在完成排序后设置新数组即可。

Answer 2

由于要逐步显示排序过程，因此可以使用import requests proxyDict = {"http" : 'http://81.93.73.28:8081'} r = requests.get('http://ipinfo.io/ip', proxies=proxyDict) r.status_code r.headers['content-type'] r.encoding print(r.text) 和Promise语法在交换后的每个状态更新之间添加延迟。

在async-await组件中，添加以下两个函数：

1. 在交换操作后的每个状态更新之间添加延迟

   BubbleSort

2. 排序函数，它将在嵌套循环内的每次交换操作之后调用sleep(seconds) { return new Promise((resolve, reject) => { setTimeout(resolve, seconds * 1000); }); }; 函数

   sleep()

演示：

Answer 3

您不需要在交换功能中设置新状态。

交换元素并在sort函数中设置新状态，如下所示：

sort = () => {
    const elements = [...this.state.elements];

    const length = elements.length;
    for (let i = 0; i < length; i++) {
      for (let j = i + 1; j < length; j++) {
        if (elements[i].value > elements[j].value) {
          const temp = elements[i];
          elements[i] = elements[j];
          elements[j] = temp;
        }
      }
    }
    this.setState({ elements });
  }