TypeError：無法讀取未定義的屬性“ 0”（使用在另一個函數中定義的平方時發生錯誤）

Question

我正在嘗試使用方形組件制作棋盤游戲，在其中我初始化了另一個函數以將ImageIcon和棋子放入棋盤，問題是

TypeError：無法讀取未定義的屬性“ 0”

每當我嘗試使用在輔助函數中返回的正方形時，都會發生此錯誤

class Board extends Component {
  renderSquare(i, squareShade) {
    const squares = initialiseChessBoard();
    //for (let i = 0; i <= squares.length; i++) {
    console.log(squares);

    console.log(i);
    // console.log("Consoling squares" + this.squares[i]);
    const m1 = (
      <Square
        piece={this.squares[i]}
        style={this.squares[i] ? this.squares[i].style : null}
        shade={squareShade}
        onClick={() => this.props.onClick(i)}
      />
    );
    return <h1>{m1}</h1>;
  }

  render() {
    console.log(initialiseChessBoard());
    function isEven(num) {
      return num % 2 === 0;
    }
    const board = [];
    for (let i = 0; i < 8; i++) {
      const squareRows = [];
      for (let j = 0; j < 8; j++) {
        const squareShade =
          (isEven(i) && isEven(j)) || (!isEven(i) && !isEven(j))
            ? "light-square"
            : "dark-square";
        squareRows.push(this.renderSquare(i * 8 + j, squareShade));
      }
      board.push(<div className="board-row">{squareRows}</div>);
    }

    return <div>{board}</div>;
  }
}

export default Board;

Answer 1

類Board沒有名為squares的成員，因此this.squares將是未定義的。 但是函數renderSquare有一個內部變量，您需要將其聲明為const squares 。 您無需此關鍵字即可訪問squares[i]類的變量。