Question

我有那个对象数组：

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位置。有人能帮助我吗？

Answer 1

似乎这两个对象实际上只是一个，在两个位置引用。因此，要解决此问题，您必须克隆/重写其中一个对象，以免影响另一个对象：

this.state.itemSquare[0] = {
   item: "bomb"
   status: true
};

然而，在反应中重写状态是非常非常糟糕的事情。相反，你应该调用setState并使用纯函数改变状态：

this.setState(({ itemSquare }) => ({
  itemSquare: itemSquare.map(({ item, status }, index) => ({
    item, status: status || index === 0
  }))
}));

Answer 2

可能是索引16处的对象，0具有相同的引用。就像下面给出的例子一样。

var arr =[{"status" : false}];
arr[1] = arr[0];
console.log(arr[0]);
console.log(arr[1]);
arr[0].status = true;

console.log(arr[0]);
console.log(arr[1]);

Answer 3

您应该以不可变的方式使用this.setState方法。

如何正确更改对象数组的属性？ Javascript ReactJS

3 个答案: