javascript - 在从另一个文件导入的递归函数期间，我将如何更新 React App 中的应用程序状态？

Question

我正在构建一个排序算法可视化应用程序，其中一些排序算法是递归的。对于这个例子，我将使用归并排序。我希望我的排序函数位于一个单独的文件中以获得更好的文件结构，但我很难使用这些导入的函数更新状态。

这是我的 App.js 代码：

import React, { Component } from 'react';
import P5Wrapper from 'react-p5-wrapper';
import sketch from './sketches/sketch.js';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown'
import ReactBootstrapSlider from 'react-bootstrap-slider'
import "bootstrap-slider/dist/css/bootstrap-slider.css"
import './App.css';


var arrayHelper = require('./helpers/array.js');
var mergeHelper = require('./algorithms/merge.js');


class App extends Component {
  constructor(){
    super();
    //this.reset = this.reset.bind(this);
    this.shuffle = this.shuffle.bind(this);
    this.setAlgo = this.setAlgo.bind(this);
    this.setArraySize = this.setArraySize.bind(this);
    this.mergeSort = this.mergeSort.bind(this);
    this.arraySize = 500;
    this.state = {currentArray: undefined, initialArray: undefined, algo: undefined, arraySize: undefined};

  }

  componentWillMount(){
    //let currentArray, initialArray;
    let arr = arrayHelper.createRandomArray(this.arraySize);
    this.setState({currentArray: arr, initialArray: arr, algo: 'Select Algorithm', arraySize: 500});
  }

  //Shuffles array to new random array
  shuffle(){
    this.setState({currentArray: arrayHelper.createRandomArray(this.state.arraySize)})
  }

  //Sets user-specified search algorithm based on dropdown button onClick 
  setAlgo(selectedAlgo){
    this.setState({algo: selectedAlgo})
  }

  //Sets the user selected array size
  setArraySize(value){
    let arr = arrayHelper.createRandomArray(value);
    this.setState({currentArray: arr, arraySize: value})
  }
  
  //Runs the imported mergeSort function from separate file
  mergeSort(){
    mergeHelper.mergeSort(this.state.currentArray, 0, this.state.currentArray.length-1);
  }

  render() {
    return (
      <header class='App-header'>
        <div class='Buttons'>
          <button onClick={this.shuffle}>Shuffle Array</button>
          <button onClick={this.mergeSort}>Sort</button>
        </div>
        <div>
          <ReactBootstrapSlider
            value={this.state.arraySize}
            change={event => this.setArraySize(event.target.value)}
            //slideStop={this.changeValue}
            step={100}
            max={1000}
            min={100}
            orientation="horizontal"
            reversed={false}
            //disabled="false" 
            />
        </div>
        <div class='Array'>Array Size: {this.state.arraySize}</div>
        <div>
        <DropdownButton alignRight title={this.state.algo} id="dropdown-menu-align-right">
          <Dropdown.Item eventKey='merge'>
          <button onClick={() => this.setAlgo('Merge Sort')}>Merge Sort</button>
          </Dropdown.Item>
          <Dropdown.Item eventKey='bubble'>
          <button onClick={() => this.setAlgo('Bubble Sort')}>Bubble Sort</button>
          </Dropdown.Item>
          <Dropdown.Item eventKey='quick'>
          <button onClick={() => this.setAlgo('Quick Sort')}>Quick Sort</button>
          </Dropdown.Item>
          <Dropdown.Item eventKey='selection'>
          <button onClick={() => this.setAlgo('Selection Sort')}>Selection Sort</button>
          </Dropdown.Item>
          <Dropdown.Item eventKey='insertion'>
          <button onClick={() => this.setAlgo('Insertion Sort')}>Insertion Sort</button>
          </Dropdown.Item>
        </DropdownButton>
        </div>
        <div class='Grid'>
          <P5Wrapper sketch={sketch} 
          currentArray={this.state.currentArray} 
          arraySize={this.state.arraySize}
          ></P5Wrapper>
        </div>
      </header>
    );
  }

  
}

export default App;

这是我的合并帮助文件代码：

//Function to merge two sorted arrays
function merge(array, left, mid, right){
    var n1 = mid - left + 1;
    var n2 = right - mid;
    var leftArray = [];
    var rightArray = [];
    for(let i=0;i<n1;i++){
        leftArray.push(array[left + i]);
    }
    for(let j=0;j<n2;j++){
        rightArray.push(array[mid + 1 + j]);
    }
    var i=0;
    var j=0;
    var k=left;
    while(i<n1 && j<n2){
        if (leftArray[i] <= rightArray[j]){
            array[k] = leftArray[i];
            i++;
        }
        else{
            array[k] = rightArray[j];
            j++;
        }
        k++;
    }
    while(i<n1){
        array[k] = leftArray[i];
        i++;
        k++;
    }
    while(j<n2){
        array[k] = rightArray[j];
        j++;
        k++;
    }
}


//Recursively called mergesort function
function mergeSort(array, left, right){
    if(left>=right){
        return;
    }
    var mid = Math.floor((left + (right-1))/2);

    mergeSort(array, left, mid);
    mergeSort(array, mid+1, right);
    merge(array, left, mid, right);
}

module.exports = {merge, mergeSort}

this.state.currentArray 必须在每次调用 merge() 后更新，但由于 mergeSort() 是递归的，因此每次都无法返回。有没有办法将 this.state 作为参数传递给 mergeSort()，在 mergeSort/merge 函数本身中更新这个参数？

这是我在 Stack 上的第一个问题，所以请让我知道我是否发布了太多信息或一直含糊不清。谢谢。

标签： javascriptreactjs