我有该对象的数组:



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/

10-11 22:47
查看更多