反应/下一个时钟示例在本地主机上不起作用

Question

我一直在努力学习反应和下一步。

在代码笔上使用这里给出的时钟示例，可在此处的 react 文档中找到。

我尝试在本地站点上实现它。

时钟.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>
    );
  }
}

索引.js - 在/页数

import Clock from '../components/Clock'
export default () => (
  <div>
    <Header />
    <div id="contentWrap">
      <div><Clock /></div>
    </div>
  </div>
)

运行 npm 运行 dev 然后转到 localhost：3000，它最初会加载，但它不会像在代码笔上那样每秒更新。

我是否在允许它更新的地方错过了一些东西？

Answer 1

它失败了，因为您忘记导入"标头"组件。

import Header from 'path/to/header'

Answer 2

我在测试中尝试了您的代码 Next.js我刚刚设置的应用程序，在我注释掉<Header/>后，它按预期工作，时钟滴答作响。

我认为最有可能的问题是 React 没有初始化客户端，这可能是由于多种原因：

• 您是否有可以阻止客户端js的noscript或类似的扩展？
• 您是否有可能会干扰下载下一个.js捆绑包的自定义快速服务器？
• 您是否调整了 Next.js webpack 配置？
• <Header/>会抛出错误吗？
• 是否有任何其他代码运行客户端而不是服务器端可能有错误？(可能在componentDidMount()方法中，也可能在getInitialProps()中的分支中。