Question

我被困在井字游戏教程增强功能中，想知道为什么以下使用renderBoard()函数的代码会崩溃。另外，我在浏览器中使用了代码笔，运行时堆栈转储似乎没有提供任何有用的信息，除了出现问题的地方-任何建议都值得赞赏。

class Board extends React.Component {
  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  renderRow(row) {
    return (
      <div className="board-row">
        {this.renderSquare(row * 3 + 0)}
        {this.renderSquare(row * 3 + 1)}
        {this.renderSquare(row * 3 + 2)}
      </div>
    );
  }

  renderBoard() {
    const rows = [];
    for (row=0; row<3; row++)
      {
        rows.push(this.renderRow(row));
      }
    return ({rows});
  }

  render() {
    return (
      <div>
        {this.renderBoard()}
      </div>
    );
  }
}

Answer 1

该代码有些错误。

  renderBoard() {
    const rows = [];
    for (row=0; row<3; row++) // <--- (1) You haven't declared `row`. Put the word `let` in front to declare it
      {
        rows.push(this.renderRow(row));
      }
    return ({rows}); // <--- (2) You're returning an object with 1 property called rows. You should just be returning the array as-is.
  }

然后（3）渲染数组时，必须添加key。

  renderRow(row) {
    return (
      <div key={row} className="board-row">
        {this.renderSquare(row * 3 + 0)}
        {this.renderSquare(row * 3 + 1)}
        {this.renderSquare(row * 3 + 2)}
      </div>
    );
  }

这是固定版本：https://codepen.io/mnpenner/pen/dxgzop

React井字游戏教程增强两个循环

1 个答案: