Question

我一直关注官方的React Tutorial here。而且我已经达到了这样的程度：当我点击一个正方形时，它会调用Board的handleClick函数来更新正方形状态。
但是，在Board类更新状态之后，它们不是＃39; t传播到正方形＆＃39;状态。
这是我的代码：

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

class Board extends React.Component {
  constructor() {
    super();
    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>
    );
  }
    handleClick(i) {
  const squares = this.state.squares.slice();
  squares[i] = 'X';
      debugger;
  this.setState({squares: squares});
}
}

https://codepen.io/mohamed3on/pen/jVVyWZ?editors=1010 我完全按照教程，直到＆＃34;为什么不变性很重要＆＃34;部分。我知道

Answer 1

您已经将每个方格的值作为属性传递，但您正试图从Square.render()中的状态中提取它。您应该使用{this.props.value}，并在构造函数中丢失状态初始化，您不需要它。一般模式是：容器组件管理状态;然后包含的组件应该是无状态的。作为一般准则，建议一直避免使用状态。

将状态传递给子组件 - React Tutorial

1 个答案: