Question

我刚刚开始学习反应。我正在学习本教程。该指南和我的逻辑告诉我该代码不起作用。但它仍在工作。我到了本教程说代码将崩溃的地步。

我们尚未定义handleClick()方法，因此我们的代码崩溃了。

但是我的代码仍然可以继续工作。我认为可能是因为它仍在运行旧版本的代码。因此，我刷新了页面并重新运行了npm start。似乎没有帮助。

这是我的代码。如您所见，我在handleClick()上都没有定义，但是游戏仍在运行。我不知道如何。

class Square extends React.Component {
    render() {
      return (
        <button
          className="square"
          onClick={() => this.props.onClick()}
        >
          {this.props.value}
        </button>
      );
    }
  }

  class Board extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        squares: Array(9).fill(null),
      };
    }

    renderSquare(i) {
        return (
          <Square
            value={this.state.squares[i]}
            onClick={() => this.handleClick(i)}
          />
        );
    }

    render() {
      const status = 'Next player: X';

      return (
        <div>
          <div className="status">{status}</div>
          <div className="board-row">
            {this.renderSquare(0)}{this.renderSquare(1)}{this.renderSquare(2)}
          </div>
          <div className="board-row">
            {this.renderSquare(3)}{this.renderSquare(4)}{this.renderSquare(5)}
          </div>
          <div className="board-row">
            {this.renderSquare(6)}{this.renderSquare(7)}{this.renderSquare(8)}
          </div>
        </div>
      );
    }
  }

  class Game extends React.Component {
    render() {
      return (
        <div className="game">
          <div className="game-board">
            <Board />
          </div>
          <div className="game-info">
            <div>{/* status */}</div>
            <ol>{/* TODO */}</ol>
          </div>
        </div>
      );
    }
  }

  // ========================================

  ReactDOM.render(
    <Game />,
    document.getElementById('root')
  );

为什么在没有handleClick()的情况下代码仍然可以正常工作？

Answer 1

Square组件只有onClick道具，只有在您实际单击组件中提供的按钮之后，才会调用该事件。因此，错误仅在您单击按钮后才会出现。到那时，您的应用将崩溃，但不仅仅是在您启动项目后崩溃。

如果仍然没有（由于缓存），请尝试使用以下命令或尝试清除浏览器缓存：

rm -rf node_modules/
npm cache clean --force
npm install
npm start

Answer 2

我已将my-app文件夹移至新文件夹。由于尚未关闭编辑器，因此vscode会复制我正在使用的文件，并将其放在桌面上。在我的编辑器中，我看到了错误的文件，但是终端在正确的目录中运行。这说明该应用并未在保存时进行更新。您完全不需要重建应用程序。它会为您做出反应。

npm run build

运行版本用于生产版本，并且不相关。

对不起，愚蠢的问题。此刻确实令人困惑。 课程-在vscode中打开时，请勿移动项目文件夹。如果确实要在正确的文件夹中重新打开vscode。

没有handleClick，React教程不会崩溃。如何运作？

2 个答案: