A
A
asmut2020-09-19 18:50:39
React
asmut, 2020-09-19 18:50:39

How to force the component to be updated?

Good afternoon.
I want to make the second hand move.
Now it only moves when it's updated.
I decided that setInterval() is a good fit, but it still lacks understanding of React.Component
and the React philosophy in general.

If it’s easy to show how to implement this, and if I approach it incorrectly, then I’m ready to hear criticism.

const deg = 6;

class Hod extends React.Component {

    constructor(props) {
        super(props);

        let day = new Date();

        this.state = {
            hh: 0,
            mm: 0,
            ss: new Date().getSeconds() * deg
        };
    }

    // updateCount() {
    //     this.setState((prevState, props) => {
    //             return {
    //                 ss: new Date().getSeconds() * 6
    //             }
    //         }
    //     )
    // }



    componentDidMount() {
        setInterval(() => {

            // let hh = day.getHours() * 30;
            // let mm = day.getMinutes() * deg;
            this.state.ss = new Date().getSeconds() * 6;
        })
    }

    render() {

        return (
            <div className={s.clock}>
                {/*<div className={s.hour}>*/}
                {/*    <div*/}
                {/*        className={s.hr}*/}
                {/*        id="hr"*/}
                {/*        style={{transform: `rotateZ(${this.props.hh}deg)`}}*/}
                {/*    >*/}

                {/*    </div>*/}
                {/*</div>*/}

                {/*<div className={s.min}>*/}
                {/*    <div className={s.mn}*/}
                {/*         id="mn"*/}
                {/*         style={{transform: `rotateZ(${this.props.mm}deg)`}}>*/}
                {/*    </div>*/}
                {/*</div>*/}

                <div className={s.sec}>
                    <div
                        className={s.sc}
                        id="sc"
                        style={{transform: `rotateZ(${this.state.ss}deg)`}}
                    >

                    </div>
                </div>
            </div>
        )
    }
}

function App() {

    return (
        <Hod />
    );
}

Answer the question

In order to leave comments, you need to log in

1 answer(s)
D
Dmitry, 2020-09-19
@asmut

UpdateCount uncomment and do not forget to set the number of milliseconds in setInterval

componentDidMount() {
  setInterval(() => {
    this.updateCount()
  }, 1000) 
}

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question