状態を子コンポーネントに渡す - リアクションチュートリアル

Question

公式のリアクションチュートリアルhereに従っています。そして、正方形をクリックすると、ボードのhandleClick関数が呼び出され、四角形の状態が更新されます。
しかし、状態がボードクラスで更新された後、状態は四角形の状態に伝播されません。ここ
は私のコードです：

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 私は「不変性が重要である理由」の部分まで正確にチュートリアルを追ってきました。私は知っている

Answer 1

あなたは既にプロパティとして各平方の値を渡していますが、あなたはSquare.render()の状態からそれを取り上げようとしています。 {this.props.value}を使用していて、コンストラクタで状態の初期化が失われている必要があります。一般的なパターンは次のとおりです。コンテナコンポーネントは状態を管理します。含まれるコンポーネントはステートレスでなければなりません。一般的なガイドラインとして、すべての状態を使用しないようにすることもお勧めします。