时间戳

首页 > 解决方案 > 当我更改状态时，为什么排序不能正常工作？

javascript - 当我更改状态时，为什么排序不能正常工作？

问题描述

我有 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} />
    )
  }
}

编辑 sparkling-sea-dt2mg

标签： javascriptreactjssortingreact-state-management

解决方案

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

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

推荐阅读