简单的计时器反应

信息开发

我开始学习React，我想创建一个将当前时间与开始时间进行比较并更新视图的组件

这是我的方式

import React from 'react';

const Timer = ({ callQueuedTime }) => (

    setInterval(function () { 
        console.log("test"); 
        return <p>{new Date().getTime() - new Date(callQueuedTime).getTime()}</p> 
    }, 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 (
            <p>{this.state.timer}</p>
        );
    }
}

现在在第一秒钟之后，我得到了这个错误

Cannot read property 'callQueuedTime' of undefined

扎卡里·哈伯（Zachary Haber）

您绝对可以使用功能组件来做到这一点。

如前所述，您不能通过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 <p>{time}</p>;
};

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 <p>{this.state.time}</p>;
  }
}

这是展示这两种选择的堆叠式闪电战：

https://stackblitz.com/edit/react-w2gqa6?file=Timer.jsx

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。