React/Next Uhr Beispiel funktioniert nicht auf localhost

Question

Ich habe versucht zu lernen reagieren und nächste.

Verwenden Sie dieses Clock-Beispiel, das hier auf codepen gegeben wird, gefunden in den reaktiven Dokumenten here.

Ich habe versucht, es auf einer lokalen Site zu implementieren.

Clock.js - in/Komponenten

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 - in/pages

import Clock from '../components/Clock' 

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

Lauf npm laufen dev dann geht auf localhost: 3000, wird es zunächst laden, aber es wird nicht Update jede Sekunde wie auf Codepen.

Habe ich irgendwo etwas verpasst, das es erlaubt zu aktualisieren?

Answer 1

Ich habe versucht, Ihren Code in einem Test Next.js App, die ich gerade eingerichtet habe, und nachdem ich die <Header/> auskommentierte, funktionierte es wie erwartet, mit einer tickenden Uhr.

ich glaube, die wahrscheinlichste Problem ist, dass Reagieren Sie nicht clientseitige Initialisierung, die aufgrund einer Reihe von Gründen sein könnte:

• Haben Sie NoScript oder eine ähnliche Erweiterung, die clientseitige blockieren könnten js?
• Haben Sie einen benutzerdefinierten Express-Server, der das Herunterladen des next.js-Bundles stören könnte?
• Haben Sie die Next.js Webpack-Konfiguration optimiert?
• Könnte der <Header/> einen Fehler ausgeben?
• Gibt es einen anderen Code, der auf der Clientseite ausgeführt wird, aber nicht auf der Serverseite, die möglicherweise einen Fehler aufweist? (Wahrscheinlich in einem componentDidMount() Verfahren oder möglicherweise eine Niederlassung in einem getInitialProps().)

Answer 2

Es schlägt fehl, weil Sie die ‚Header‘ Komponente zu importieren vergessen.

import Header from 'path/to/header'