setInterval的时钟不更新时间

Question

愚蠢的。 是react docs代码。 https://codepen.io/gaearon/pen/gwoJZk?editors=0010

我正在尝试在本地设置中运行react docs给出的时钟，并稍加修改，但是时钟显示的是当前时间，没有以秒或分钟为单位的增量。

//组件/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

Answer 2

您的版本中未使用setInterval。 您只需导出刻度组件。 在刻度内移动setInterval

Answer 3

正确的反应方式是

const myInterval; // Useful for manage and refer to the setinteval object
updateTime = () => setState({currentTime: new Date().toLocaleTimeString())
startInterval = () =>  myInterval = setInterval(updateTime, 1000);

在渲染中：

 <div>
    {this.state.currentTime}
 </div>