Merge sort not working as expected react state array

Question

I'm working on a sorting visualizer, I've been debugging this for hours. I'm trying to sort an array that is stored in the state.

I've setup a codesandbox here: https://codesandbox.io/s/pensive-villani-kdh17?file=/src/SortingVisualizer/SortingVisualizer.jsx

Can someone show me where I'm going wrong?

  mergeSort = async () => {
    const { array } = this.state;
    const arry = array.slice();
    const auxArray = arry.slice();
    await this.mergeSortHelper(arry, auxArray, 0, arry.length - 1);
  };

  mergeSortHelper = async (arry, auxArray, start, end) => {
    if (start === end) {
      return;
    }
    const middle = Math.floor((start + end) / 2);
    await this.mergeSortHelper(arry, auxArray, start, middle);
    await this.mergeSortHelper(arry, auxArray, middle + 1, end);
    await this.doMerge(arry, auxArray, start, middle, end);
  };

  doMerge = async (arry, auxArray, start, middle, end) => {
    let a = start; //arry start
    let b = start; //auxArray start
    let c = middle + 1; //mid start

    while (b <= middle && c <= end) {
      if (arry[b].height <= arry[c].height) {
        arry[a] = auxArray[b];
        this.setState({ array: arry });
        await sleep(ANIMATION_SPEED_MS);
        a++;
        b++;
      } else {
        arry[a] = auxArray[c];
        this.setState({ array: arry });
        await sleep(ANIMATION_SPEED_MS);
        a++;
        c++;
      }
    }

    while (b <= middle) {
      arry[a] = auxArray[b];
      this.setState({ array: arry });
      await sleep(ANIMATION_SPEED_MS);
      a++;
      b++;
    }

    while (c <= end) {
      arry[a] = auxArray[c];
      this.setState({ array: arry });
      await sleep(ANIMATION_SPEED_MS);
      a++;
      c++;
    }
    auxArray = arry.slice();
  };

I may be wrong, but I asked a similar question yesterday: stackoverflow.com/questions/65689646/… — yahms23
– yahms23, Commented Jan 13, 2021 at 9:13
No, I'm having no problem re-rendering my array with new data — Sujio
– Sujio, Commented Jan 13, 2021 at 9:18

Taghi Khavari · Accepted Answer · 2021-01-13 09:16:56Z

1

I think you don't need all those complecated functions, just add these to function to your code and use them:


  increasingSort = (inputArray) => inputArray.sort((a, b) => a.height - b.height)

  decreasingSort = (inputArray) => inputArray.sort((a, b) => b.height - a.height);

check this: https://codesandbox.io/s/pedantic-architecture-vc4ox

answered Jan 13, 2021 at 9:16

Taghi Khavari

6,6173 gold badges21 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sujio Over a year ago

I'm trying to make a visualizer for the actual sorting

Sujio Over a year ago

yes, how would I show the actual sorting steps? did you look at my demo?

Taghi Khavari Over a year ago

what do you mean by actual sorting steps? yes I've just added the two functions above and showed you in the link above that how you could use it. did you see the demo that it works and data is sorted?

Sujio Over a year ago

a SORTING VISUALIZER, it would show the steps of the merge sort on a random array to a sorted array. I'm aware I can just use library functions automatically get a sorted array.

Taghi Khavari Over a year ago

@Sujio I'm not getting your point. have a good day

|

Sujio · Accepted Answer · 2021-01-14 03:02:22Z

0

The bug was that the auxArray and arry was different after changing it and recursive calling.

answered Jan 14, 2021 at 3:02

Sujio

4772 gold badges5 silver badges18 bronze badges

Collectives™ on Stack Overflow

Merge sort not working as expected react state array

2 Answers 2

6 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related