React/Nextクロックの例がlocalhostで動作しない

Question

私は反応を覚えようとしています。

codepenに記載されているこの時計の使用例は、にあります。

私はローカルサイトで実装しようとしました。

Clock.js - 中/コンポーネント

export default class Clock extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {date: new Date()}; 
    } 

    componentDidMount() { 
    this.timerID = setInterval(
    () => this.tick(), 
     1000 
    ); 
    } 

    componentWillUnmount() { 
    clearInterval(this.timerID); 
    } 

    tick() { 
    this.setState({ 
     date: new Date() 
    }); 
    } 

    render() { 
    return (
     <div> 
     <h2>It is {this.state.date.toLocaleTimeString()}.</h2> 
     </div> 
    ); 
    } 
} 

index.js - 中/ページ

import Clock from '../components/Clock' 

export default() => (
    <div> 
    <Header /> 
    <div id="contentWrap"> 
     <div><Clock /></div> 
    </div> 
    </div> 
) 

は、その後、ローカルホストに行くNPMの実行DEVの実行：3000、それは最初は文句を言わないロードそれますcodepenのように各秒を更新してください。

私はそれが更新することができるどこかで逃しましたか？

Answer 1

ちょうど設定したテストNext.jsアプリでコードを試しましたが、<Header/>をコメントアウトした後、期待通りに動くようになりました。私が最も可能性の高い問題は反応することがあると思い

が原因多くの理由になる可能性がある、クライアント側の初期化されていません。

• あなたはnoscript要素や、クライアント側をブロックする可能性が同様の拡張子を持っていますかjs？
• next.jsバンドルのダウンロードを妨げているカスタムエクスプレスサーバーがありますか？
• Next.jsウェブパック設定を調整しましたか？
• <Header/>にエラーメッセージがありますか？
• クライアント側では実行されているが、サーバー側ではエラーが発生している可能性のある他のコードはありますか？ （おそらくcomponentDidMount()方法、または可能性getInitialProps()に支店インチ）

Answer 2

あなたは[ヘッダー]コンポーネントをインポートするのを忘れたので、それは失敗です。

import Header from 'path/to/header'