Javascript 在更改原始状态副本时对状态更改作出反应？

我正在尝试使用React制作一个简单的游戏，比如紫色宫殿中的紫色对游戏。我有一个名为

clickBtn

的方法，它应该在单击时增加计数，在第二次单击时减少计数，但我不知道为什么

handleClick

方法正在更改状态的

selected

和

clicked

属性，即使没有使用

setState

方法复制新状态。你能帮我修一下吗

类游戏板扩展React.Component{
构造函数（）{
超级（）；
此.state={
分数：0，
时间:0,，
列表：[…generateObList（），…generateObList（）]，
计数：0
};
}
handleClick=（id）=>{
点击此按钮。点击BTN（id）；
const list=this.state.list.slice（）；
const current=list.find（（a）=>a.id==id）；
对于（列表中的x）{
如果（x.clicked&&x.value==list.find（（a）=>a.id==id.value）{
x、 选择=正确；
x、 单击=假；
current.selected=true；
current.clicked=false；
//此.setState（（上一个）=>({
//列表：上一个列表映射（（el）=>
//el.id==id？当前：el.value===current.value？x:el
//   ),
//分数：上一个分数+1
// }));
}
}
};
单击BTN=（id）=>{
const current=this.state.list.slice（）.find（（e）=>e.id==id）；
让deClick=current.clicked；
current.clicked=！current.clicked；
console.log（当前）；
这是我的国家(
（上一页）=>({
列表：上一个列表映射（（el）=>（el.id==id？当前：el）），
计数：上一个计数+（取消单击？-1:1）
}),
() => {
console.log（this.state.count、deClick、current）；
}
);
};
render（）{
const boardStyle={
gridTemplateColumns:`repeat（5，1fr）`，
gridTemplateRows:`重复（5,1r）`
};
让list=this.state.list.map（（n）=>(
{
这是handleClick（n.id）；
}}
show={！n.selected}
/>
));
返回(
{list}
);
}
}

slice（）

只需返回数组的浅层副本，以便如果项目是引用类型（对象），则原始和副本都引用相同的数组项目

对于对象切片，将对象引用复制到新数组中。两者 原始数组和新数组引用同一对象。如果对象发生变化， 这些更改对新阵列和原始阵列都可见

尝试深度复制对象。通过使用，

JSON.parse（JSON.stringify（arr））

您还可以尝试

lodash

的

cloneDeep（）

方法

---

有关深度克隆的更多详细信息-

“轻松进行深度复制”附带了许多警告。这种方法不能正确地处理对对象的嵌套引用，或者实例化类，例如

Date

，等等。如果您有非常简单的带有文字字符串和数字值的数据结构，那么它可能会起作用，但请小心。另外，您应该提到，直接更新React状态是一个非常糟糕的想法，也是一种反模式<代码>设置状态（）应始终用于更新状态。是。这就是为什么我还提到了

cloneDeep

&在关于深度复制的详细答案中添加了参考。而且，因为他做的是浅层复制，所以他直接更新状态。如果他对变量进行了深度复制，

current

，那么它应该可以像他使用

setState

更新它一样工作。我想说的是，我尝试使用

rest

操作符，因为我想在另一个组件中使用状态的副本。它不起作用，但当我使用回答中提到的

JSON解析时，它起作用了。对象具有嵌套对象，但不超过2个级别。我很震惊，其余的都没用。JSON不会生成空值、未定义值和函数/属性值的良好副本