反应原生显示当前时间并实时更新秒数

Question

我想像时钟一样在本机应用程序中显示当前时间（MM/DD/YY hh:mm:ss），并每秒更新一次，我尝试使用 new Date() 并将其设置为状态，但时间不除非我刷新页面，否则不会更新。我还尝试在 render() 中使用 setInterval 函数，它确实得到了更新，但它对 CPU 来说很昂贵。有没有实现功能的好方法？

 state = {
    curTime: null,
}
render(){
    setInterval(function(){this.setState({curTime: new  Date().toLocaleString()});}.bind(this), 1000);
    return (
        <View>
            <Text style={headerStyle.marginBottom15}>Date: {this.state.curTime}</Text>
        </View>
    );
}

原文由 inoutwhy 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

只需将 setInterval 移动到 componentDidMount 函数中。

像这样 ：

   componentDidMount() {
    setInterval(() => {
      this.setState({
        curTime : new Date().toLocaleString()
      })
    }, 1000)
  }

这将改变状态并每 1 秒更新一次。

原文由 Nguyên Hoàng 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

在反应挂钩中，它可以这样做：

 import React, { useState, useEffect } from "react";

const [dt, setDt] = useState(new Date().toLocaleString());

useEffect(() => {
    let secTimer = setInterval( () => {
      setDt(new Date().toLocaleString())
    },1000)

    return () => clearInterval(secTimer);
}, []);

原文由 Ilana Hakim 发布，翻译遵循 CC BY-SA 4.0 许可协议