Question

我有一个react组件，它接受2个time.js时间格式的数组，这些时间格式将用作该组件中的props，然后以传入的格式在小时钟小部件中呈现时间。我需要动态计算刷新间隔取决于传入和使用的时间格式。因此，如果由于第二个计数器传入的时间格式而只需要几秒钟，则间隔每秒刷新一次，如果只需要几分钟，刷新率将在每分钟左右。找不到任何有用的信息，因此请寻求一些建议。提前致谢。这是我的代码，很抱歉，现在看起来如此粗糙。

import React, { Component } from 'react';
import moment from 'moment';

// Styles
import Style from 'Components/Header/Header.module.css';

class ClockWidget extends Component {
    constructor() {
        super()

        this.state = { 
            time: moment().format('hh:mm a'),
            toggle: true,
            timerID: null
        }

        this.handleClick = this.handleClick.bind(this);
    }


    setTime() {

        this.timerID = setInterval(() => {

            if (this.state.toggle == true) {

                this.setState({
                    time: moment().format(this.props.timeFormat[0])
                })

            } else if (this.state.toggle == false) {

                this.setState({

                    time: moment().format(this.props.timeFormat[1])
                })
            }
            console.log("State: ", this.state);
        }, this.state.toggle ? 1000 : 60000);
    }


    componentDidMount() {

        this.setTime();
    }

    handleClick() {

        if (this.state.toggle) {
            this.setState({ toggle: false })
        } else {
            this.setState({ toggle: true })
        }
    }

    render() {  

        return ( 
            <div onClick={this.handleClick}>
                <p className={Style.action}> {this.state.time} </p>            
            </div>
        )}
    }
    ClockWidget.defaultProps = {
        timeFormat: ['hh:mm a', 'HH:mm']
    }

export default ClockWidget;

Answer 1

进行一些更改...

in your state {
    this.timerId = null
}

.
.
.
.

setTime(time = null, toggle = null) {

    this.timerId = setInterval(() => {
        if (this.state.toggle) {
            this.setState({
                time: moment().format(this.props.timeFormat[0]),
            })
        } else if (!this.state.toggle) {
            this.setState({
                time: moment().format(this.props.timeFormat[1]),
            })
        }
    }, 1000)
}

componentDidMount() {
    this.setTime();
}

componentWillUnmount() {
    clearInterval(this.timerId)
}

如果要进行更新，请使用更新生命周期方法与安装生命周期方法聚集

需要根据传递的时间格式动态计算刷新间隔

1 个答案: