Javascript 在react中更新一个状态时更新多个集合

我是新的反应，我玩反应状态和组件。我制作了这个小应用程序，它从用户那里获取数组元素并随机改变元素的位置。但当我改变一种状态时，另一种状态也会随之改变。我有一个状态称为元素数组，它包含数字数组，另一个状态称为draw，它将包含元素数组中元素位置随机移动的元素。问题是当draw[]更改元素[]时，元素[]也会更改我不希望元素[]更改。我只希望draw[]包含元素[]数组中具有数组中新位置的元素

当我点击draw按钮时，它会生成带有随机定位元素的数组，但它也会更改元素数组中元素的位置，该数组包含元素的原始位置。当我更新绘图数组时，我不知道元素数组是如何变化的

const dom=document.getElementById（“fn”）
类最终扩展了React.Component{
建造师（道具）
{
超级（道具）
这个州={
元素：[]，
抽签：[]
}
this.addElement=this.addElement.bind（this）
this.drawer=this.drawer.bind（this）
}
出票人（）{
//移位逻辑Fisher–Yates_shuffle
var n=this.state.element.length
var t=this.state.element
无功温度；
而（n！==0）{
var rand=Math.floor（Math.random（）*Math.floor（n））
n--；
温度=t[n]
t[n]=t[rand]
t[rand]=温度
}
此.setState（（上一个）=>{
返回{draw:t}//更新一个状态
})
}
附加元素（元素）
{
if（！元素）
{
return“添加内容！”
}
else if（this.state.element.indexOf（element）>-1）
{
return“值已存在！”
}
此.setState（（上一个）=>{
元素=上一个元素concat（元素）
返回{element}
})
}
render（）
{
返回(


)
}
}
类AddElement扩展了React.Component{
建造师（道具）
{
超级（道具）；
this.add=this.add.bind（this）
this.drawIt=this.drawIt.bind（this）
这个州={
错误：未定义
}
}
加（e）
{
e、 预防默认值（）；
常量元素=e.target.elements.element.value
常量v=此.props.addElement（元素）；
this.setState（（）=>{return{error:v}}）
}
drawIt（）
{
this.props.drawer（）//调用最终组件中的drawer函数
}
render（）
{
返回(
添加元素
{this.state.error&&{this.state.error}
}
画出来
元素数组中的元素


{this.props.element.map（（x）=>{return}}

)
}
}
类抽屉扩展了React.Component{
render（）
{
返回(
{this.props.draw.length>0&&新随机生成的元素位置
}

{this.props.draw.map（（x）=>{return}}

)
}
}
类元素扩展了React.Component{
render（）{
返回(
{this.props.v}
)
}
}
ReactDOM.render（，dom）

---

这是因为您正在修改状态数组，您可以在

抽屉中克隆或使用解构赋值方法：

错误

var t = this.state.element;

对

var t = [...this.state.element];

您还可以看到它在工作。
在javascript中，对象和数组作为引用传递

所以基本上你的路线

var t=this.state.element

这并没有创建数组的副本，而是创建了对同一数组的新引用

var t = [...this.state.element];

使用解构赋值，可以将数组中的值或对象中的属性解包为唯一或新变量