javascript - ReactJS 二维数组

Question

我正在使用以下代码创建一个二维 bool 值数组(最初填充为 false)，然后分别翻转值。

constructor(props) {
  super(props);

  this.state = {
    fullGrid: Array(3).fill(Array(5).fill(false))
  };
  this.toggleFullGrid = this.toggleFullGrid.bind(this);
}

//Toggles boolean value found at id
toggleFullGrid(cols, rows) {
  alert("This is index.js, we got everything: " + cols + " " + rows);
  let alteredGrid = this.state.fullGrid;
  console.log(alteredGrid);
  console.log(cols + " " + rows);
  console.log(alteredGrid[cols][rows]);

  //change alteredGrid at cols,rows
  alteredGrid[cols][rows] = !alteredGrid[cols][rows];
  console.log(alteredGrid);

  this.setState({fullGrid: alteredGrid});
}

然而，这不是翻转单个值，而是导致整个列被翻转(以一种非常困惑的方式)。这是控制台输出:

(3) [Array(5), Array(5), Array(5)]
  0 : (5) [true, false, false, false, false]
  1 : (5) [true, false, false, false, false]
  2 : (5) [true, false, false, false, false]
  length : 3
  __proto__ :  Array(0)

index.js:21 0 0

index.js:22 false

index.js:26 
(3) [Array(5), Array(5), Array(5)]
  0 : (5) [true, false, false, false, false]
  1 : (5) [true, false, false, false, false]
  2 : (5) [true, false, false, false, false]
  length : 3
  __proto__ : Array(0)

第一个数组是翻转前的副本，所以我不确定为什么它不全是假的。第二个和第三个输出证明程序知道它在翻转什么以及在哪里翻转。第四个输出(第二个数组)与第一个相同。

此外，它也不是真正的更新。状态更改应强制其他元素更新(并根据它们对应于数组中的 true 还是 false 来更改颜色)，但这并没有发生。

问题:为什么要翻转整个列？为什么第一个输出数组与第二个输出数组相同？我如何让它翻转单个值？我如何让它正确更新？

此外，有人告诉我，当尝试翻转值时，javascript 中的数组会发生奇怪的事情，所以我测试了一个版本，我将数组值保存到一个单独的 var，翻转它，然后将其保存回来。结果是一样的。

Answer 1

似乎您使用 Array.fill() 的方式导致了问题。

这是因为只有一行被内部引用了 3 次。因此，当您更改任何行中的任何单元格时，其他行中的特定单元格也会更改。

您可以像这样使用数组填充:

this.state = {
  fullGrid : Array(3).fill(0).map(row => new Array(5).fill(false))
}

上述解决方案将首先创建一个包含 0 的数组，然后将每一行映射到一个新数组，您可以在其中填充 false。

你也可以测试一下:

var a =  new Array(3).fill(new Array(5).fill(false));
(3) [Array(5), Array(5), Array(5)]
  0 : (5) [false, false, false, false, false]
  1 : (5) [false, false, false, false, false]
  2 : (5) [false, false, false, false, false]
  length : 3
  __proto__ :  Array(0)

如果你这样做

a[0][0] = true

现在 a 将变成:

(3) [Array(5), Array(5), Array(5)]
  0 : (5) [true, false, false, false, false]
  1 : (5) [true, false, false, false, false]
  2 : (5) [true, false, false, false, false]
  length : 3
  __proto__ :  Array(0)

由于值是通过引用更改的，因此每一行的第一个单元格都变为 true。

您的 console.log 输出是相同的，因为 console.log 以异步方式发生。

Checkout this link for more details about it