Необходимо динамически вычислять интервал обновления в зависимости от формата времени, переданного в качестве пропеллера - PullRequest
Новая
       13

Необходимо динамически вычислять интервал обновления в зависимости от формата времени, переданного в качестве пропеллера

0 голосов
/ 03 мая 2019

У меня есть компонент реагирования, который принимает массив из 2 форматов времени moment.js, которые будут использоваться в качестве реквизитов в компоненте, чтобы затем отображать время в небольшом виджете часов в переданном формате. Мне нужно динамически рассчитать интервал обновления в зависимости от формата времени, переданного и используемого. Таким образом, если требуется только секунды из-за формата времени, передаваемого в качестве счетчика секунд, интервал обновляется каждую секунду, а если нужны только минуты, частота обновления будет примерно каждую минуту. Не могу найти ничего, что помогло, поэтому просил совета. Заранее спасибо. Вот мой код, извините, сейчас он выглядит так грубо. 

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;

1 Ответ

0 голосов
/ 03 мая 2019

внести некоторые изменения ... 

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)
}

, и если вы хотите обновить, используйте методы жизненного цикла обновления вместе с методами монтирования жизненного цикла

...