Question

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

使用此codepen上的时钟示例，在反应文档here中找到。

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

Clock.js - in / components

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>
)

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

我错过了允许更新的地方吗？

Answer 1

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

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

你有noscript或类似的扩展名可以阻止客户端js吗？
您是否有可能干扰下载next.js捆绑包的自定义快速服务器？
你有没有调整过Next.js webpack config？
<Header/>可能会抛出错误吗？
是否有任何其他代码运行客户端但服务器端可能有错误？（可能在componentDidMount()方法中，或者可能是getInitialProps()中的分支。）

Answer 2

它失败了，因为你忘了导入标题＆＃39;零件。

import Header from 'path/to/header'

React / Next时钟示例不适用于localhost

2 个答案: