javascript - setInterval 的时钟不更新时间

Question

下面。是 react 文档代码。 https://codepen.io/gaearon/pen/gwoJZk?editors=0010

我正在尝试在本地设置中运行 react 文档给出的时钟，稍加修改，但时钟显示当前时间，没有任何秒或分钟的增量。

//组件/Clock.js

import React from 'react';

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
 return element;
}

setInterval(tick, 1000);

export default tick;

//src/App.js

import React, { Component } from 'react';
import Clock from './components/Clock';

class App extends Component {
  render() {
    return (
      <div>
        <Clock />
      </div>
    );
  }
}

export default App;

为什么时间不更新？

Answer 1

我已经为您创建了一个示例。实际上你必须使用setInterval并且需要将当前时间存储到组件的状态中。

https://stackblitz.com/edit/react-nuhgwi?file=Hello.js