我在React组件中有一个倒计时器,计数器为10秒。如果组件在这10秒内收到后端数据,则计时器停止。如果没有,它将倒计时到0,此时页面将刷新,然后再次倒计时,依此类推,直到收到数据。我的代码如下:
constructor() {
...
this.counter = 10;
...
}
render() {
const interval = setInterval(() => {
const result = this.state.data;
if (result) {
this.setState({
resultsReceived: true
});
clearInterval(interval);
} else {
this.setState({
resultsReceived: false
});
this.counter = this.counter - 1;
if (this.counter === 0) {
window.location.reload();
}
}
}, 1000);
问题是,计时器似乎没有每秒递减。相反,行为是不稳定的 - 从10到7可能非常快,然后它可能会挂起甚至在0之后继续,即为负。该页面正在重新加载。这个代码是错误的,还是与React的状态有关的问题?任何帮助都会很棒!
更新:
我将代码更改为:
constructor() {
this.state = {
...
interval: '',
counter: 10
};
}
componentWillMount() {
$.ajax({
url: this.props.api,
datatype: 'json',
cache: false,
success: (data) => {
this.setState({ data });
}
});
const interval = setInterval(() => {
const results = this.state.data;
if (results) {
this.setState({
resultsReceived: true
});
clearInterval(this.state.interval);
} else {
this.setState({
resultsReceived: false
});
let counter;
counter = this.state.counter - 1;
this.setState({ counter });
if (this.state.counter === 0) {
window.location.reload();
}
}
}, 1000);
this.setState({ interval });
}
componentWillUnmount() {
clearInterval(this.state.interval);
}
比以前更好的是,计时器第一次正常工作 - 每1秒从10变为0。然而,即使在10秒之后数据没有加载并且计时器再次从10开始,它达到9然后停止,直到数据最终加载。该页面也变得非常慢。
答案 0 :(得分:1)
我不确定为什么会这样,但我确定你的代码有点奇怪。
首先,将你的间隔保持在state
非常奇怪。相反,请将其保留在组件实例中,以便您可以轻松清除它
不要设置数据并按间隔检查。您可以在api请求完成后释放间隔并将数据设置为状态。
在解除组件之前始终清除间隔。
这是我的建议。
constructor() {
...
this.interval = null
this.state = { counter: 10 }
...
}
componentWillMount() {
$.ajax({
url: this.props.api,
datatype: 'json',
cache: false,
success: (data) => {
this.setState({ data })
clearInterval(this.interval);
},
});
this.interval = setInterval(() => {
if (counter <= 0) {
clearInterval(this.interval);
location.reload();
return;
}
this.setState({
counter: this.state.counter - 1,
});
}, 1000);
}
componentWillUnmount() {
clearInterval(this.interval)
}
实际上如果你不使用interval和setTimeout,如果你的state.counter
只存在以检查已经过了多少秒,那就更好了。
constructor() {
...
this.timeout = null
...
}
componentWillMount() {
$.ajax({
url: this.props.api,
datatype: 'json',
cache: false,
success: (data) => {
this.setState({ data })
clearTimeout(this.timeout);
}
});
this.timeout = setTimeout(() => {
clearTimeout(this.timeout);
location.reload();
}, 1000 * 10);
}
componentWillUnmount() {
clearTimeout(this.timeout)
}
setInterval很贵。不要用它来做这种工作。