为什么我的数组被追加而不是清除和添加新数据

Question

我正在尝试实现一种方法，每次单击“创建新数组”按钮时，数组步骤都会填充新数据，但不是那样，而是数据被追加而不是更新。

这是我的状态：

const [arr , setArray] = useState(createArray())
const [steps , setSteps] = useState([]);
const [selectedAlgorithm , setSelectedAlgorithm] = useState ();

这是我创建新数组的函数：

const handleCreateNewData = ()=>{
    let newarr = createArray();
    setArray ([]);
    
    setArray([...newarr]);
    setSteps ([]);
    setTimeout(()=>{
        if ( algorithms[selectedAlgorithm] !== undefined){
            algorithms[selectedAlgorithm](arr, steps , setSteps);
            console.log('running')
        }

    },2000)
   
}

这是我的冒泡排序算法：

export const BubbleSort = (array , steps ,setSteps) =>{
let funarray = new Array();
funarray = [...array] ;
for (let i = 0 ; i < funarray.length-1 ; i++){
    for(let j = 0 ; j < funarray.length-1 ; j++){
        if(funarray[j]>funarray[j+1]){
            [funarray[j],funarray[j+1]] = [funarray[j+1],funarray[j]]
            setSteps([...steps, funarray])
            steps.push(funarray.slice());
            console.log('Working')
        }
    }
}


return funarray;
 } 

应该做的是每次我点击创建新数组时，它应该生成一组新数组，而不是创建新数组，它只是在旧步骤中附加新数组。

Answer 1

您可以创建一个临时数组来保存步骤，然后在循环完成后调用 setSteps：

const BubbleSort = (array, steps, setSteps) => {
  let funarray = [];
  funarray = [...array];
  let temp = [];
  for (let i = 0; i < funarray.length - 1; i++) {
    for (let j = 0; j < funarray.length - 1; j++) {
      if (funarray[j] > funarray[j + 1]) {
        [funarray[j], funarray[j + 1]] = [funarray[j + 1], funarray[j]];
        temp.push(funarray)
      }
    }
  }
  setSteps(temp);

  return funarray;
};

示例：https://codesandbox.io/s/cool-wind-ijj7z?file=/src/App.js