Как переделать функциональную компоненту с useEffect под классовую?
Есть компонент, таймер обратного отсчета, написанный через useEffect.Решил личного опыта переделать под классовую компоненту, и тут возникли проблемы. Не совсем понимаю, как правильно нужно перенести. И поставить зависимость. P.S. В пропсе countdownTimestampMs передаю число, которое отвечает за определенную дату в будущем, до которой и ведется отсчет. Может кто-то подскажет, в чем, или где может быть ошибка.
Компонент useEffect :
const CountdownTimer = ({ countdownTimestampMs }) => {
const [remainingTime, setRemainingTime] = useState({
seconds: '00',
minutes: '00',
hours: '00',
days: '00 ',
});
useEffect(() => {
const intervalId = setInterval(() => {
updateRemainingTime(countdownTimestampMs);
}, 1000);
return () => {
clearInterval(intervalId)
}
}, [countdownTimestampMs])
function updateRemainingTime(countdown) {
setRemainingTime(getRemainingTimes(countdown))
}
return (
<div className="CountdownTimer">
<Timer remainingTime={remainingTime} />
</div>
); }
Компонент через componentDidUpdate, который не работает.
import React from "react";
import Timer from "./Timer";
import { getRemainingTimes } from "./Utils/CountDownTimerUtils";
class CountdownTimer extends React.Component {
constructor() {
super();
this.state = ({
seconds: '00',
minutes: '00',
hours: '00',
days: '00 ',
})
}
componentDidUpdate(prevProps, prevState) {
if (prevProps.status != this.props.status) {
const intervalId = setInterval(() => {
this.updateRemainingTime(this.props.countdownTimestampMs);
}, 1000);
}
}
componentWillUnmount() {
clearInterval(intervalId)
}
updateRemainingTime(countdown) {
this.setState(getRemainingTimes(countdown))
}
render() {
console.log(this.state.seconds)
return (
<div className="CountdownTimer">
<Timer remainingTime={this.state} />
</div>
)
}
}
export default CountdownTimer;