Javascript 在Typescript中作出反应：在计时器函数中，进度继续无限大

构建一个赛车应用程序，我需要在获胜者到达终点线（100）时创建一个简单的警报。我正在进行一场无限长的跑步比赛（如果您在

timer

中输入

console.log

任何内容，您都会看到）。我如何提醒获胜者并结束比赛？我在这里只使用一个赛车手。另一个赛车部件操纵赛车手

import*as React from'React'；
界面道具{
颜色：字符串；
化身：字符串；
}
界面状态{
间隔：数字；
进展：数目；
}
导出类Jockey扩展React.Component{
国家：国家；
建造师（道具：道具）{
超级（道具）；
此.state={
间隔：Math.floor（Math.random（）*500），
进展：0，
};
}
组件安装（）{
setInterval（this.timer、this.state.interval）；
}
计时器=（）=>{
this.setState（{progress:this.state.progress+1}）；
console.log（'anyhting'）；
//即使进度条达到100，比赛也不会停止。
if（this.state.progress==100）{
警惕（“你赢了！！”）；
}
//tslint:禁用下一行：无未使用的表达式
（this.state.progress>=99）？this.setState（{progress:100}）：“”；
}
render（）{
返回(
);
}
}

只需存储由

setInterval

返回的间隔id，然后使用它调用

clearInterval

（）

不要忘记相应地更改接口：

interface JockeyState {
    interval: number;
    progress: number;
}

// Inside timer method
    if (this.state.progress === 100) {
        window.clearInterval(this.timerIntervalId);
        alert('you won!!');
    }

此外，如果卸载了组件，则最好清除间隔（但这取决于您的应用程序逻辑-您可能希望让比赛在后台进行）。不过，大多数情况下，您会为此创建一个单独的服务，所以不要将其保留在组件中

// how to clear on unmount
componentWillUnmount() {
    clearInterval(this.timerIntervalId);
}

编辑： 答案不是使用state，而是现在在组件类中使用私有属性

export class JockeyComponent extends React.Component<JockeyState, JockeyProps> {
    private timerIntervalId: number;


}

导出类JockeyComponent扩展React.Component{
private timerIntervalId：数字；
}

清除正在设置的间隔。 使用prevState时，最好使用

setState

类Jockey扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
间隔：Math.floor（Math.random（）*500），
进展：0，
};
}
组件安装（）{
this.time=setInterval（this.timer，this.state.interval）；
}
计时器=（）=>{
this.setState（（prevState）=>{
如果（prevState.progress==100）{
clearInterval（本次）；
警惕（“胜利”）；
返回{}；//状态没有变化
}否则{
返回{
进度：prevState。进度+1
}
}
});
}
组件将卸载（）{
clearInterval（this.time）；//计时器卸载时清除计时器
}
render（）{
返回(
{this.state.progress}

);
}
}
ReactDOM.render（，document.getElementById（'app'））

谢谢。您的代码段可以工作，但从我的角度来看，类型“Jockey”上不存在属性“time”。您的意思是“计时器”

您知道为什么吗？您似乎没有使用typescript。因此不提供typescript。因此，为了让它运行，我必须删除typescript注释。您可以添加

this.time

初始值并修复此问题，ti仍将在运行时工作。I get>类型为“{intervalId:Timer；}”的参数不可分配给类型为“State |”的参数（（prevState:Readonly，props:props）=>State | Pick） | Pick@colin_dev256将接口的

intervalId:number

成员更改为

intervalId:Timer

[ts]找不到名称“Timer”

是我得到的错误。@colin\u dev256恢复为

intervalId:number

，而不是使用

setInterval

窗口。setInterval

窗口

工作：）但是，即使在单击警报弹出窗口上的“确定”后，

计时器仍将继续
export class JockeyComponent extends React.Component<JockeyState, JockeyProps> {
    private timerIntervalId: number;


}