react中简单时间计数器
react中简单时间计数器
提问于 2020-04-28 07:51:57
我开始学习React，我想创建一个组件，将当前时间与开始时间进行比较，并更新视图。
我是这样做的：
import React from 'react';
const Timer = ({ callQueuedTime }) => (
setInterval(function () {
console.log("test");
return {new Date().getTime() - new Date(callQueuedTime).getTime()}
}, 1000)
)
export default Timer;在devTools中，console.log正在每隔1秒刷新一次，但不是HTML。而且，我总是得到相同的值，这不是new Date().getTime() - new Date(callQueuedTime).getTime()
获取信息callQueuedTime= 2020-04-23T22:02:07.382Z
更新
我已经更新了我的组件代码：
class Timer extends React.Component {
constructor(props, context) {
super(props, context)
this.state = {
timer: 0,
}
}
componentDidMount() {
console.log(this.props)
setInterval(function () {
const time = new Date().getTime() - new Date(this.props.callQueuedTime).getTime()
this.setState({ time });
}, 1000)
}
render() {
return (
{this.state.timer}
);
}
}现在，在第一秒之后，我得到了这个错误：
无法读取未定义的属性“”callQueuedTime“”
Stack Overflow用户
回答已采纳
发布于 2020-04-28 08:34:04
你绝对可以用一个功能组件来做到这一点。
如前所述，您不能从setInterval调用返回JSX。setInterval返回用于清除的id。
我这样做的方式是保持时间为状态，然后在效果中每秒钟更新一次该时间。
import React, { useEffect, useState } from 'react';
const Timer = ({ callQueuedTime }) => {
const [time, setTime] = useState(() => new Date().getTime());
useEffect(() => {
const queuedTime = new Date(callQueuedTime).getTime();
const intervalId = setInterval(function () {
setTime(new Date().getTime() - queuedTime);
}, 1000);
return ()=>{
clearInterval(intervalId);
}
}, [callQueuedTime]);
return {time};
};
export default Timer;方法中返回的函数useEffect
是清理函数。它在useEffect下一次运行之前和组件卸载之前被调用。进一步阅读：
https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup
https://overreacted.io/a-complete-guide-to-useeffect/
下面是作为类组件的工作代码：
您遇到的问题是，您在setInterval中使用的是函数，而不是箭头函数，因此您将无法访问组件的this
..。你可能会遇到的另一个问题是，你在卸载时没有清理你的间隔。
import React, { Component } from "react";
export default class TimerComponent extends React.Component {
state = { time: 0 };
componentDidMount() {
this.intervalId = setInterval(() => {
const time =
new Date().getTime() - new Date(this.props.callQueuedTime).getTime();
this.setState({ time });
}, 1000);
}
componentWillUnmount(){
clearInterval(this.intervalId);
}
render() {
return {this.state.time};
}
}下面是展示这两种选择的stackblitz：
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61470404
复制相关文章
相似问题
腾讯云开发者
