React Native自定义Clock类导入后仅秒数显示、定时器异常求解

现有代码的错误点 #

• 重复给state赋值，后赋值的state会直接覆盖之前的内容，最终初始state仅保留curSeconds字段，所以小时、分钟取值为undefined，显示空白
• renderMinutes方法中取值的字段名错误：state中存储分钟的键是curMins，但代码中错误调用this.state.curMinutes，无法取到有效值
• setInterval回调中多次独立调用setState且每次都重新实例化Date对象，既没有性能优势，还可能出现跨时间单位时取值不一致的问题
• 缺少类组件必须的render方法，无法完整渲染所有时间内容
• 未添加定时器清除逻辑，组件卸载后定时器仍会运行，存在内存泄漏风险

修复后的完整代码 #

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

export default class Clock extends Component {
  // 合并state初始化，避免重复覆盖
  state = {
    curHours: new Date().getHours(),
    curMins: new Date().getMinutes(),
    curSeconds: new Date().getSeconds()
  }

  componentDidMount(){
    // 存储定时器ID，方便卸载时清除
    this.timer = setInterval(() => {
      // 统一获取一次当前时间，避免取值不一致
      const now = new Date();
      // 合并单次setState更新所有字段
      this.setState({
        curHours: now.getHours(),
        curMins: now.getMinutes(),
        curSeconds: now.getSeconds()
      })
    }, 1000);
  }

  // 组件卸载前清除定时器
  componentWillUnmount() {
    clearInterval(this.timer);
  }

  renderHours() {
    return (
      <Text>Hours:{this.state.curHours}</Text>
    );
  }
  renderMinutes() {
    // 修正字段名为curMins
    return (
      <Text>Minutes:{this.state.curMins}</Text>
    );
  }
  renderSeconds() {
    return (
      <Text>Seconds:{this.state.curSeconds}</Text>
    );
  }

  // 新增必填的render方法，组合所有时间展示内容
  render() {
    return (
      <View>
        {this.renderHours()}
        {this.renderMinutes()}
        {this.renderSeconds()}
      </View>
    )
  }
}

额外优化建议 #

• 可以给小时、分钟、秒数补0，比如1分5秒显示为01:05，格式更统一
• 后续要做任务提醒的话，可以在setState的回调中判断当前时间是否匹配提醒时间，触发对应通知逻辑

内容的提问来源于stack exchange，提问作者Noobgrammer