node.js - React.js チェックサム無効警告のトラブルシューティングと修正方法

Question

ここで Isomoprhic React スターター キット プロジェクトを使用して、Isomorphic 反応アプリを構築しています: https://github.com/kriasoft/react-starter-kit

ただし、トラブルシューティングの方法がわからないという不思議な警告が表示されます。

React は私のブラウザでは問題なくコードをレンダリングしているように見えますが、サーバーでのレンダリングに問題があるようです。

これが私が得る警告です：

warning.js:45警告: React はコンテナー内のマークアップを再利用しようとしましたが、チェックサムが無効でした。これは通常、サーバー レンダリングを使用していて、サーバー上で生成されたマークアップがクライアントが予期していたものではないことを意味します。React は新しいマークアップを挿入してどちらが機能するかを補いましたが、サーバー レンダリングの多くの利点が失われました。代わりに、生成されるマークアップがクライアントまたはサーバーで異なる理由を調べてください。

問題の原因であるコンポーネントのコードは次のとおりです。

class TestPage extends React.Component {
  constructor () {
    super()
    this.state = { n: 0 }
  }

  static contextTypes = {
    onSetTitle: PropTypes.func.isRequired
  };

  static defaultProps = {
    blahblah: 'blah'
  }

  render() {
    let title = 'Test Page';
    this.context.onSetTitle(title);
    return (
      <div className="page">
        <div className="pageContainer">
          <h1>{title}</h1>
            {this.state.n}
          <TestComponent blahblah={this.props.blahblah} />
        </div>
      </div>
    );
  }
}