useState钩子的“setState”在一次调用中出现两次

Question

有一个带有正方形的板，其值取决于数组，它由useStatehook处理。每次单击都会将值提高一，但不幸的是，它会将值提高两次（第一次单击除外）。

我的问题是：

（1） 为什么会发生这种情况，（2）如何避免它，以及，一般来说，（3）有没有更好的方法来处理这样一个带有钩子的数组。

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执行完整的状态复制。如果使用纯组件，解析是个坏主意，因为所有内容都将重新呈现。

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

Answer 2

正如Udaya Prakash在上面的评论中提到的，它被调用了两次，以确保您的setState是独立的和幂等的。所以，如果我理解正确的话，它被调用两次不是一个错误，但是你的值在第二次被更改是。

以下是丹·阿布拉莫夫在同一期GitHub上的评论：

预计setState更新器将在开发中以严格模式运行两次。这有助于确保代码不依赖于它们运行一次（如果异步渲染被中止并更改重新启动，情况就不会如此）。如果setState更新器是纯函数（应该如此），那么这不应该影响应用程序的逻辑。

我们可以通过深度复制您的prevValues来修复它，而不是使用spread运算符进行浅复制。您可能已经知道，深度复制对象有多种方法，我们可以使用JSON。解析（JSON.stringify（…） 现在，您可以从这里用您最喜欢的种类替换它

setSquaresValue(prevValues => {
  let newBoard = JSON.parse(JSON.stringify(prevValues)); // <<< this
  console.log("before: " + newBoard[rowIndex][cellIndex]);
  newBoard[rowIndex][cellIndex] = newBoard[rowIndex][cellIndex] + 1;
  console.log("after: " + newBoard[rowIndex][cellIndex]);
  return newBoard;
});

如果你想玩的话，我已经在codesandbox中模拟过了。