Question

foll。是反应文档代码。 https://codepen.io/gaearon/pen/gwoJZk?editors=0010

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

// components / 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。您只需导出tick组件。在set内移动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>

setInterval没有更新时间的时钟

3 个答案: