简单的 Tic-Tac-Toe ReactJS，生成组件搞乱状态

Question

井字游戏：

X | O | 
O | X | 
X | O | X

我尝试学习ReactJS。我已经按照 https://react.dev/learn/tutorial-tic-tac-toe 的教程进行操作。但很难解决教程的第二个挑战。

这是一个方形组件：

function Square({ value, onSquareClick }) {
  return (
    <button className="square" onClick={onSquareClick}>
      {value}
    </button>
  );
}

所以。 我们有手动生成的井字棋主板。它包含 9 个方形组件

<>
<div className="board-row">
        <Square value={squares[0]} onSquareClick={() => handleClick(0)} />
        <Square value={squares[1]} onSquareClick={() => handleClick(1)} />
        <Square value={squares[2]} onSquareClick={() => handleClick(2)} />
      </div>
      <div className="board-row">
        <Square value={squares[3]} onSquareClick={() => handleClick(3)} />
        <Square value={squares[4]} onSquareClick={() => handleClick(4)} />
        <Square value={squares[5]} onSquareClick={() => handleClick(5)} />
      </div>
      <div className="board-row">
        <Square value={squares[6]} onSquareClick={() => handleClick(6)} />
        <Square value={squares[7]} onSquareClick={() => handleClick(7)} />
        <Square value={squares[8]} onSquareClick={() => handleClick(8)} />
      </div>
    </>
</>

效果很好， 预期的行为是：当我第一次单击其中一个正方形时，单击的正方形用户界面更改为“X”。手动生成板子时有效。

问题出现在第二个挑战中，当自动生成方形组件时。

我使用Array.Map，成功生成了9个方块的UI。但是，当我第一次点击其中一个方块时，自动生成的所有方块都变成了“X”。

function generateSquare(dimension) {
    let dimensionTranslate = [...Array(dimension).keys()];
    return(
        dimensionTranslate.map((row) => {
          return(<div className="board-row">
              {
                dimensionTranslate.map((column) => {
                  let squareIndex = (dimension*row)-row + column;
                  return <Square key={squareIndex} value={squares[{ squareIndex }]} onSquareClick={() => handleClick({ squareIndex })} />
                })
              }
            </div>
          )
        })
    )
  }

请看问题图片

PS：

1. 平方索引生成正确值：0,1,2,3,4,5,6,7,8。
2. 上面的代码（自动生成方形组件）位于相同的代码块/相同的功能/相同的组件（板组件，方形组件的父级）中，我手动生成9个方形组件

同时，尽管自动生成出现错误，但手动生成的 Square 仍然可以正常工作。

我已经为此工作了近两天，但我找不到问题的根本原因。

我已经尝试过以下操作：

1. 将地图更改为for循环（不起作用）
2. 减少.Map函数的循环，目前它有2个循环用于在用户界面中创建新行，我只创建了1行，1.map函数，我认为原因是因为多个地图。 （不起作用，行为仍然相同。）
3. 确保 Squareindex 已正确分配（已正确分配，不起作用，行为仍然相同。）
4. 将映射结果放入 Const 变量中，而不是带有返回值的函数（不起作用，行为仍然相同。）

请检查这里的沙箱： https://codesandbox.io/p/sandbox/tic-tac-toe-tutorial-mpvcr7

Answer 1

这张票可以关闭。问题在于

handleClick( {squareIndex} )

而不是 @super 提到的

handleClick(squareIndex)

。谢谢大家