反应时间实现中的秒静态

Question

我的 React App 组件中有一个 javascript Time 函数，一切运行良好。但主要问题是我需要几秒钟的时间来继续计数，而不是在页面刷新之前保持静止。

已经尝试了几次，但仍然无法正常工作。下面附上我目前所拥有的。

我的代码在下面。

App.js

import React, { Component } from 'react'

export class App extends Component {
  constructor(props) {
    super(props)
  
    this.state = {
       
    }
  }
  

render() {
   
  function getDateTime() {
      let now     = new Date(); 
      let year    = now.getFullYear();
      let month   = now.getMonth()+1; 
      let day     = now.getDate();
      let hour    = now.getHours();
      let minute  = now.getMinutes();
      let second  = now.getSeconds(); 
      if(month.toString().length === 1) {
           month = '0'+month;
      }
      if(day.toString().length === 1) {
           day = '0'+day;
      }   
      if(hour.toString().length === 1) {
           hour = '0'+hour;
      }
      if(minute.toString().length === 1) {
           minute = '0'+minute;
      }
      if(second.toString().length === 1) {
           second = '0'+second;
      }   
      var dateTime = hour+':'+minute+':'+second;   
       return dateTime;
  }

    return( 
  <div>
  
    {<h2>The time is {getDateTime()}</h2>}

 
  
  </div>
  )}
}

export default App

索引.js

import React from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  rootElement
);

Answer 1

我在评论中描述了解决方案，但这里有一个更详细的 jsfiddle：

这里的想法是将时间存储在状态中，并在每次您希望计时器更新时更新状态。在有状态组件中设置setInterval的地方通常是componentDidMount

https://jsfiddle.net/nfr6phw2/

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
        datetime: new Date()
    }
  }
  
  componentDidMount() {
    setInterval(() => {
        this.setState({datetime: new Date()})
    }, 1000);   
  }
  
  getDateTime() {
      let now     = new Date(); 
      let year    = now.getFullYear();
      let month   = now.getMonth()+1; 
      let day     = now.getDate();
      let hour    = now.getHours();
      let minute  = now.getMinutes();
      let second  = now.getSeconds(); 
      if(month.toString().length === 1) {
           month = '0'+month;
      }
      if(day.toString().length === 1) {
           day = '0'+day;
      }   
      if(hour.toString().length === 1) {
           hour = '0'+hour;
      }
      if(minute.toString().length === 1) {
           minute = '0'+minute;
      }
      if(second.toString().length === 1) {
           second = '0'+second;
      }   
      var dateTime = hour+':'+minute+':'+second;   
       return dateTime;
  }
  
  render() {
    return (
      <div>
        <h2>The time is {this.getDateTime()}</h2>
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

在这里您可以使用react 中的state 管理和定时器功能。因此，每 1000 毫秒后，它会从 getDateTime 函数中检索值并更新状态。所以当状态改变时，页面正在渲染。我已经更新了你的代码。请检查

import React, { Component } from "react";

export class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dateTime: ""
    };
  }

  getDateTime = () => {
    let now = new Date();
    let year = now.getFullYear();
    let month = now.getMonth() + 1;
    let day = now.getDate();
    let hour = now.getHours();
    let minute = now.getMinutes();
    let second = now.getSeconds();
    if (month.toString().length === 1) {
      month = "0" + month;
    }
    if (day.toString().length === 1) {
      day = "0" + day;
    }
    if (hour.toString().length === 1) {
      hour = "0" + hour;
    }
    if (minute.toString().length === 1) {
      minute = "0" + minute;
    }
    if (second.toString().length === 1) {
      second = "0" + second;
    }
    var dateTime = hour + ":" + minute + ":" + second;
    return dateTime;
  };

  componentDidMount() {
    this.myInterval = setInterval(() => {
      this.setState({ dateTime: this.getDateTime() });
    }, 1000);
  }

  render() {
    return <div>{<h2>The time is {this.state.dateTime}</h2>}</div>;
  }
}

export default App;