Javascript 设置间隔不更新时间的时钟

福勒。这是一个代码。

我试图在本地设置中运行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;

从“React”导入React；
函数tick（）{
常量元素=(
你好，世界！
它是{new Date（）.toLocaleTimeString（）}。
);
返回元素；
}
设置间隔（刻度，1000）；
导出默认勾号；

//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;

import React，{Component}来自'React'；
从“./组件/时钟”导入时钟；
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

---

为什么时间没有更新？

您的版本中没有使用setInterval。您只需导出tick组件。将setInterval移到勾号内

在react中的正确方式是

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>

{this.state.currentTime}

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

---

这很正常，当你渲染你的时钟时，你的日期只计算一次。您必须每秒钟刷新一次时钟组件，或者将时间存储到您所在状态的变量中。在这里，你只是导出你的函数，而setInVal不是exported@Alexis那么它是如何工作的，是因为它使用ReactDOM直接更新DOM。你的意思是我需要使用容器类来维护状态并使用setState来更新时间吗？仅仅因为你正在导出没有设置间隔的元素，所以你的

元素

只渲染一次