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

Доска класса не имеет члена с именем squares, поэтому this.squares будет неопределенным. Но функция renderSquare имеет внутреннюю переменную, которую вы объявили как const squares. Вы можете получить доступ к переменной как squares[i] без этого ключевого слова.