我有一个倒数计时器,当它变为0时应该调用一个方法。然后,呈现一个新页面,倒数应该重置并重新开始。它会按预期工作,直到卸下组件。然后每秒就会调用一次timeNext()
方法,因为该间隔不再停止了。
import React, { Component } from 'react';
class Countdown extends Component {
state = {
timer: this.props.timer
}
decrementTimeRemaining = () => {
if (this.state.timer > 0) {
this.setState({
timer: this.state.timer - 1
});
} else {
clearInterval(this.timerFunction);
this.props.timeNext();
this.setState({ timer: this.props.timer });
this.decrement();
}
};
decrement() {
this.timerFunction = setInterval(() => {
this.decrementTimeRemaining();
}, 1000);
}
componentDidMount() {
this.decrement()
}
componentWillUnmount() {
console.log("unmounted")
clearInterval(this.timerFunction);
}
render() {
return (
<div>{this.state.timer} </div>
)
}
}
export default Countdown;
我怀疑它会导致无限循环。我认为清除componentWillUnmount()
中的间隔会起作用,但是显然有一个错误。甚至在卸载组件并且我不知道如何停止它的情况下,似乎也会有一个间隔运行。
答案 0 :(得分:1)
我认为您的decrementTimeRemaining函数过于复杂。我会像这样重构函数:
decrementTimeRemaining = () => {
if (this.state.timer > 0) {
this.setState({
timer: this.state.timer - 1
});
} else {
this.setState({ timer: this.props.timer });
}
};
现在,componentWillUnmount是唯一调用clearInterval的位置,而componentDidMount是唯一启动间隔的位置。