2 回答

TA貢獻1828條經驗 獲得超3個贊
第一個評論您帖子的用戶是對的。但讓我澄清一下。
這就是我認為正在發生的事情。組件第一次呈現時執行 timer() 方法,該方法設置計時器間隔。第一秒后,執行間隔回調,這會更改組件狀態,并反應安排重新渲染您的組件。然后,組件重新渲染自己,并在設置新間隔的第 2 秒(請原諒這個多余的短語)之前再次執行 timer() 函數。這種情況會發生,直到您清除間隔,這是您的代碼設置的最后一個間隔。這就是為什么您注意到可變時間的值變化異??斓脑?。
你應該做這樣的事情:(這是你的相同代碼,有一些變化,可能對你理解更有用。然后你可以給出你自己的風格或個人風格)
import React from "react";
export default class Timer extends React.Component {
constructor(){
super();
this.state = {
time: 3,
}
this.countdown = this.countdown.bind(this);
this.timer = this.timer.bind(this)
}
componentDidMount() {
this.interval = setInterval(() =>
this.countdown(interval),1000
);
}
componentWillUnmount() {
if (this.interval) {
clearInterval(this.interval);
}
}
countdown(){
if(this.state.time == null)
{
console.log("NULL")
}
let myTime = this.state.time
if(myTime > 0) {
myTime--;
this.setState({time: myTime})
console.log(myTime)
} else {
clearInterval(this.interval)
}
return myTime;
}
render() {
return (
<div id = "Timer">
<p>
{this.state.time}
</p>
</div>
);
}
}
干杯!

TA貢獻1793條經驗 獲得超6個贊
我會componentDidMount在這里開始間隔。您只想創建一次間隔,然后在它完成倒計時或組件在計時器達到 0 之前卸載時清理它。您可以在此基礎上構建額外的功能來執行停止/重新啟動等操作......等等
export default class Timer extends React.Component {
state = {
time: this.props.start || 3
};
options = {
interval: this.props.interval || 1000
step: this.props.step || 1
};
interval = null;
componentDidMount() {
this.countdown()
}
componentWillUnmount() {
clearInterval(this.interval)
}
tick = () => {
this.setState(
({ time }) => ({ time: time - this.options.step }),
() => {
if (this.state.time === 0) {
clearInterval(this.interval);
}
}
);
}
countdown = () => {
this.interval = setInterval(this.tick, this.options.interval);
}
render() {
return (
<div id="Timer">
<p>{this.state.time}</p>
</div>
);
}
}
添加回答
舉報