React井字棋教程：handleClick函数无法接收传递参数

你的问题出在参数接收和数组赋值的语法错误上，具体两个核心问题：

• 定义handleClick时用了对象解构{i}接收参数，但调用时传递的是普通数字（比如handleClick(1)），解构不到i属性，导致参数i为undefined。
• 数组赋值时写了nextSquares[{i}]，这里把{i}当成对象作为索引，实际会被转换成字符串[object Object]，根本无法正确定位数组元素。

修正步骤 #

1. 把handleClick的参数从{i}改成普通参数i，同时修正数组赋值语法：

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

2. 调用时的() => handleClick(1)写法无需修改。

修正后的完整代码 #

import React from 'react';
import { useState } from 'react';

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

export default function Board() {
  const [squares, setSquares] = useState(Array(9).fill(null));
  
  function handleClick(i) {
    const nextSquares = squares.slice();
    nextSquares[i] = "X";
    setSquares(nextSquares);
  }

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

  return (
    <React.Fragment>
      <div className="board-row">
        <Square value={squares[0]} onSquareClick={handleClick0} /> 
        <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>
    </React.Fragment>
  );
}

修改后点击对应格子就能正确设置为X，和handleClick0的逻辑一致但支持动态指定格子位置。

内容的提问来源于stack exchange，提问作者Ed Hiinton