我有该对象的数组:
this.state = {
itemSquare: [{
item: "bomb",
status: false
}, {
item: "bomb",
status: false
}, {
item: "bomb",
status: false
},
{
item: "bomb",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
},
{
item: "bomb",
status: false
}, {
item: "bomb",
status: false
}, {
item: "bomb",
status: false
},
{
item: "bomb",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
},
{
item: "field",
status: false
}
],
}
我想只更改给定的
status
,我正在这样做:teste = () => {
this.state.itemSquare[0].status = true
console.log(this.state.itemSquare)
}
但是,我不知道为什么,它正在改变其他人,让我返回的是:
(18)[{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0
: {
item: "field",
status: true
}
1
: {
item: "field",
status: false
}
2
: {
item: "field",
status: false
}
3
: {
item: "field",
status: false
}
4
: {
item: "bomb",
status: false
}
5
: {
item: "bomb",
status: false
}
6
: {
item: "field",
status: false
}
7
: {
item: "bomb",
status: false
}
8
: {
item: "field",
status: false
}
9
: {
item: "bomb",
status: false
}
10
: {
item: "field",
status: false
}
11
: {
item: "field",
status: false
}
12
: {
item: "bomb",
status: false
}
13
: {
item: "field",
status: false
}
14
: {
item: "bomb",
status: false
}
15
: {
item: "field",
status: false
}
16
: {
item: "field",
status: true
}
17
: {
item: "bomb",
status: false
}
length
:
18
__proto__
:
Array(0)
如您所见,
16
也已更改,该如何做?如果我只是问0位置。有人能帮我吗?
最佳答案
好像这两个对象实际上只是一个,在两个位置引用。因此,要解决此问题,您必须克隆/重写其中一个对象,以免影响其他对象:
this.state.itemSquare[0] = {
item: "bomb"
status: true
};
但是,将状态重写为react是一件非常非常糟糕的事情。相反,您应该调用
setState
并使用纯函数使状态发生变化:this.setState(({ itemSquare }) => ({
itemSquare: itemSquare.map(({ item, status }, index) => ({
item, status: status || index === 0
}))
}));
关于javascript - 如何正确更改对象数组的属性? JavaScript ReactJS,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/50859940/