在 React 中改变一个状态时，两个状态都在改变

Question

我正在尝试更改一种状态，但在这样做的同时我的另一种状态也发生了变化，但我找不到问题所在，我该怎么办？这是我的代码：

import React, {useState } from 'react'


 //style = {{margin : '50px', minWidth : '1200px' , minHeight : '500px'}
 const Container = ()=>{
const [arr , setArray] = useState([])
const [steps , setSteps] = useState([[]]);


const createArray = () =>{
    let array = []
        let i = 0;
        while (i <60){
          let number =  Math.random()*100;
            array.push(number);
            i++;
        }
         return array;
}
const BubbleSort = (array) =>{
    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]);
            }
        }
    }
}
    
  const handleCreateNewData = ()=>{
   let newarr = createArray();

    setArray([...newarr]);

}
const handleBubbleSort = ()=>{
    BubbleSort(arr);
}


return(
    <div className="container "  style = {{margin : '50px ', minWidth : '1200px' , minHeight : '500px'}}>
    <div className="row">
        <div className="col s2 " style = {{margin : '20px' , padding : '20px'}}>
            <div className="row" ><a class="waves-effect waves-light btn green" onClick = {handleCreateNewData}>Create New Array</a></div>
            <div className="row"><a class="waves-effect waves-light btn black" onClick = {handleBubbleSort}>BubbleSort</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>
            <div className="row"><a class="waves-effect waves-light btn black">button</a></div>

        </div>
        <div className="col s9 grey">
            <div style = {{minWidth : '1000px' , minHeight : '500px'}}>
               {arr.map((val , index)=>(
                   
                   
                   <div>
                   <div style = {{height : '1px'}}></div>
                    <div className="bar black" style = {{height : '7px' , width : val*8}}> </div>
                    <div style = {{height : '1px'}}></div>
                    </div>
                   
               )
               )
                   
               
               }
                
            </div>
        </div>
        </div>
    </div>
)
}

export default Container ;

我正在尝试按步骤创建一个数组数组，在这些步骤中，每次通过后都会保存新数组，但在这样做的同时我的 arr 也在改变。

Answer 1

我认为你的错误在于：

funarray = array

的冒泡排序。应该使用：

funarray = [...array]

否则你正在修改你传递引用的原始数组。

在 React 中改变一个状态时，两个状态都在改变

While changing one state in React both states are getting changed

javascript

jsx

reactjs

react-hooks

use-state