arrays - useState hook 的 'setState' 一次调用出现两次

Question

有一个带有正方形的棋盘，它们的值依赖于一个数组，它由 useState Hook 处理。每次点击都应该将值增加一个，但不幸的是，它增加了两个(第一次点击除外)。

我的问题是:

(1) 为什么会发生，(2) 如何避免，以及，一般来说，(3) 有没有更好的方法来处理带有钩子(Hook)的数组。

let emptyBoard = Array.from({ length: parseInt(props.rows, 10) }, () =>
    new Array(parseInt(props.columns, 10)).fill(0)
  );

  const [squaresValues, setSquaresValue] = useState(emptyBoard);

  function onClick(id) {
    const [rowIndex, cellIndex] = id;
    console.log("the " + id + " square was clicked");
    setSquaresValue(prevValues => {      
      let newBoard = [...prevValues];
      console.log("before: " + newBoard[rowIndex][cellIndex]);
      newBoard[rowIndex][cellIndex] = newBoard[rowIndex][cellIndex] + 1;
      console.log("after: " + newBoard[rowIndex][cellIndex]);
      return newBoard;
    }
    );
  }

日志:

the 3,0 square was clicked 
before: 0 
after: 1 
the 3,0 square was clicked 
before: 1 
after: 2 
before: 2 
after: 3 

可以看出，从第二次点击开始，每次点击该值都会增加两次。

Answer 1

您仍在改变状态，如果您有纯组件，那么它们在改变时不会重新渲染。如果您有纯组件，则使用 JSON.parse 执行完整状态复制不是一个好主意，因为所有内容都将重新呈现。

let newBoard = [...prevValues];
newBoard[rowIndex] = [...newBoard[rowIndex]];
newBoard[rowIndex][cellIndex] =
newBoard[rowIndex][cellIndex] + 1;