我在 JavaScript 中制作了一个时钟 class，但导入后无法正常工作。我只能得到秒数，间隔似乎也不起作用

Question

import React, { Component } from 'react';
import { Text, View } from 'react-native';


export default class Clock extends Component {

  componentDidMount(){

    setInterval(() => (

      this.setState(
        { curHours :  new Date().getHours()}
      ),
      this.setState(
        { curMins :  new Date().getMinutes()}
      ),
      this.setState(
        { curSeconds :  new Date().getSeconds()}
      )
    ), 1000);
  }


state = {curHours:new Date().getHours()};
state = {curMins:new Date().getMinutes()};
state = {curSeconds:new Date().getSeconds()};

  renderHours() {
    return (
  <Text>{'Hours:'}{this.state.curHours}</Text>
    );
  }
  renderMinutes() {
    return (
  <Text>{'Minutes:'}{this.state.curMinutes}</Text>
    );
  }
  renderSeconds() {
    return (
  <Text>{'Seconds:'}{this.state.curSeconds}</Text>
    );
  }
}

-我正在尝试制作一个可以跟踪时间的应用程序，有点像每日计划。所以我需要在app运行时间内实时获取当前时间。例如，该应用程序应该告诉用户他们未能在给定时间内完成某项任务。我尝试导出 clock.js 并使用它的功能，但只有 renderSeconds() 有效，其他的只显示空白。

Answer 1

当您定义 state 三次时，只有最后一个被保留，因为您正在覆盖前一个变量。此外，您的初始状态应该在构造函数中声明。将此添加到 class

的顶部

constructor() {
  this.state = {
    curHours:new Date().getHours(),
    curMins:new Date().getMinutes(),
    curSeconds:new Date().getSeconds(),
  }
}

Answer 2

我认为功能组件解决这个问题会简单得多，但这只是我的看法。这是 link 到 example

我在 JavaScript 中制作了一个时钟 class，但导入后无法正常工作。我只能得到秒数，间隔似乎也不起作用

I made a clock class in JavaScript, but it's not working properly when imported. I can only get the seconds and the interval doesn't seem to work too

javascript

import

export

reactjs