Question

这里的学习反应,并在此进行中-tac-toe intro:https://react.dev/learn/tutorial-tic-tac-toe。

我试图理解为什么我的法典没有发挥作用。 https://react.dev/learn/tutorial-tac-toe#completing-the-MO 部分,请添加如下内容:

<Square value={squares[8]} onSquareClick={() => handleClick(8)} />

I m trying to take a slightly different approach and create the squares programmatically, like so:


export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  function handleClick(i) {
    const nextSquares = squares.slice();
    nextSquares[i] = "X";
    setSquares(nextSquares);
  }

  var boardRows = [];
  var counter = 0;

  for (var i = 0; i < 3; i++) {
    var boardSquares = [];
    for (var j = 0; j < 3; j++) {
      boardSquares.push(<Square value={squares[counter]} onSquareClick={() => handleClick(i)} />);
      counter ++;
    }

    boardRows.push(<div className="board-row"> {boardSquares} </div>);
  }

  return boardRows;
}

The problem is, the handleClick(i) is using 9, since that s the final value of my counter. Is there a way to have the function "save" the value that will be passed in on the click? Or am I going about this wrong?

Answer 1

The issue you re facing is due to the fact that the handleClick function you re passing to the onSquareClick prop inside the loop is always referencing the final value of i (which is 2 in this case). This happens because JavaScript closures capture the current value of variables.

To fix this issue, you can modify your code by creating a new function within the loop that captures the value of i for each iteration. This way, the correct value of i will be used when calling the handleClick function. Here s how you can do it:

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));

  function handleClick(i) {
    const nextSquares = squares.slice();
    nextSquares[i] = "X";
    setSquares(nextSquares);
  }

  var boardRows = [];
  var counter = 0;

  for (var i = 0; i < 3; i++) {
    var boardSquares = [];
    for (var j = 0; j < 3; j++) {
      const index = counter; // Capture the current value of counter
      boardSquares.push(<Square value={squares[index]} onSquareClick={() => handleClick(index)} />);
      counter++;
    }

    boardRows.push(<div className="board-row"> {boardSquares} </div>);
  }

  return boardRows;
}

创建<代码>constindex = 反;, 载于内机内,并使用<代码>index 在<条码>总部功能内,你确保每个点击活动的<条码>/index正确值被捕获和使用。这应当解决你在<代码>i上面对的问题。

友情链接