React排序可视化工具中终止运行函数的问题求助

我明白你遇到的麻烦了——想要在排序动画运行时终止它，但因为React setState的异步特性，导致检查状态总是慢半拍，无法及时停止函数。让我一步步帮你修复这个问题：

问题根源 #

1. setState的异步性：你在generateNewArray里设置abort: true后，状态不会立刻更新，SortArray里循环检查的this.state.abort还是旧值，导致无法触发终止。
2. 变量快照的问题：SortArray开头就把arrayToSort和prevChanged从state中取出存为局部变量，后续即使state更新，这些变量还是引用的旧数据，而且循环里的状态更新也可能堆积。

解决方案：使用实例变量替代state存储终止标记 #

既然我们需要同步地检查和更新终止状态，直接用React组件的实例变量（比如this.abortFlag）会比state更合适，因为实例变量的更新和读取都是同步的，不需要等待异步状态更新。

修改后的代码 #

resetArray(){
  const arrayToSort = [];
  const prevChanged = [];
  for (let i = 0; i < this.state.numberOfItems; i++) {
    arrayToSort.push(this.RandomIntBetweenRange(5, 1000));
  }
  // 重置终止标记为false
  this.abortFlag = false;
  this.setState({ arrayToSort, prevChanged });
}

generateNewArray(){
  // 立即设置终止标记为true
  this.abortFlag = true;
  // 修正setState回调的写法：第二个参数是函数，不是对象
  this.setState(
    { /* 这里不需要更新abort到state了 */ },
    () => this.resetArray()
  );
}

async SortArray(algo){
  // 从state获取初始数组，创建副本避免直接修改state
  let arrayToSort = [...this.state.arrayToSort];
  let prevChanged = [...this.state.prevChanged];
  let sortedArrayAnim = algo(arrayToSort); // 传入副本避免修改原数组

  for (let index = 0; index < sortedArrayAnim.length; index++) {
    // 同步检查实例变量，立刻获取最新值
    if(this.abortFlag){
      console.log("排序已终止");
      // 清空prevChanged避免残留状态
      this.setState({prevChanged: []});
      return null;
    }

    const [i,j] = sortedArrayAnim[index];
    let temp = arrayToSort[i];
    arrayToSort[i] = arrayToSort[j];
    arrayToSort[j] = temp;
    prevChanged.push(i,j);

    if(index === sortedArrayAnim.length - 1){
      prevChanged.push(arrayToSort.length + 1, arrayToSort.length + 1);
    }
    // 用函数式更新获取最新的state，避免异步更新导致的状态不一致
    this.setState(prevState => ({
      arrayToSort: [...arrayToSort],
      prevChanged: [...prevChanged]
    }));
    await sleep(10);
  }
}

render() {
  const {arrayToSort} = this.state;
  return (
    <div className="main-div">
      {arrayToSort.map((value, idx) => (
        <div className="array-item" key={idx} style={{height: value, width: 800 / this.state.numberOfItems, backgroundColor: this.getColor(idx)}}>
        </div>
      ))}
      <button onClick={() => this.generateNewArray()}>Generate new array</button>
      <button onClick={() => this.SortArray(BubbleSort)}>Bubble Sort</button>
      <button onClick={() => this.SortArray(InsertionSort)}>Insertion Sort</button>
      <button onClick={() => this.SortArray(QuickSort)}>Quick Sort</button>
      <input type="number" min="5" max="1500" onChange={(event) => this.handleOnChange(event)} defaultValue={this.state.numberOfItems}/>
    </div>
  );
}

关键修改点说明 #

• 用this.abortFlag替代state中的abort：实例变量的更新和读取都是同步的，确保点击“Generate new array”后，SortArray能立刻检测到终止信号。
• 修正generateNewArray的setState回调：之前的写法this.setState({abort: true},{this.resetArray();})是错误的，setState的第二个参数必须是函数，这里改为() => this.resetArray()确保状态更新完成后再重置数组。
• 使用数组副本避免直接修改state：在SortArray中创建arrayToSort和prevChanged的副本，避免直接修改state导致的不可预期行为。
• 函数式setState：更新状态时使用prevState => ({ ... })，确保每次更新都是基于最新的状态，避免异步更新带来的状态不一致问题。

这样修改后，你点击“Generate new array”按钮时，正在运行的SortArray函数会立刻检测到this.abortFlag为true，终止循环并重置状态，完美解决中途终止的问题！

内容的提问来源于stack exchange，提问作者Nícolas