在 React 中更改一种状态时，两种状态都发生了变化答案

【问题标题】：While changing one state in React both states are getting changed在 React 中更改一种状态时，两种状态都发生了变化
【发布时间】：2021-04-21 15:37:22
【问题描述】：

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

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 也在改变。

【问题讨论】：

标签： javascript reactjs react-hooks jsx use-state

【解决方案1】：

我认为你的错误在于：

funarray = array

冒泡排序。应该与：

funarray = [...array]

否则，您将修改原始数组，并将引用传递给该数组。

【讨论】：