Javascript 使用挂钩取消React组件中的requestAnimationRequest不会'；行不通

我正在处理进度条（最终…），我想在达到某个值（10100，…，N）时停止动画（调用

cancelAnimationRequest

），并将其重置为0

但是，在我的当前代码中，它会重置为0，但会无限期地运行。我想这部分代码可能有问题：

setCount((prevCount) => {
    console.log('requestRef.current', requestRef.current, prevCount);
    
    if (prevCount < 10) return prevCount + deltaTime * 0.001;
    
    // Trying to cancel the animation here and reset to 0:
    cancelAnimationFrame(requestRef.current);

    return 0;
});

---

代码的主要问题是您试图取消已执行的更新。相反，您可以避免请求不需要的最后更新。您可以在下面看到问题和简单的解决方案：

const计数器=（）=>{
const[count，setCount]=React.useState（0）；
const requestRef=React.useRef（）；
const previousTimeRef=React.useRef（0）；
常量animate=React.useCallback（（时间）=>{
log（'RUN:'，requestRef.current）；
setCount（（prevCount）=>{
const deltaTime=时间-前一个timeref.current；
const nextCount=prevCount+deltaTime*0.001；
//我们将限制值加1，以确保最后一个有效值为
//也为一整帧显示：
如果（下一个计数>=11）{
log（'CANCEL:'，requestRef.current'，（这将无法按预期工作）'）；
//这行不通：
//cancelAnimationFrame（requestRef.current）；
//相反，让我们使用此Ref避免再次调用'requestAnimationFrame'：
requestRef.current=null；
}
返回nextCount>=11？0:nextCount；
});
//如果已经达到限制值，请不要再次调用'requestAnimationFrame'：
if（requestRef.current！==null）{
previousTimeRef.current=时间；
requestRef.current=requestAnimationFrame（动画）；
log（'-SCHEDULE:'，requestRef.current）；
}     
}, []);
React.useffect（（）=>{
requestRef.current=requestAnimationFrame（动画）；
return（）=>cancelAnimationFrame（requestRef.current）；
}, []);
//这将降低以下值：
//看https://stackoverflow.com/questions/7487977/using-bitwise-or-0-to-floor-a-number.
返回（{count | 0}/10）；
};
ReactDOM.render（，document.getElementById（'app'））
html{
显示器：flex；
对齐项目：居中；
证明内容：中心；
身高：100%；
}
身体{
字体大小：60px；
字号：700；
字体系列：“Roboto Mono”，monospace；
颜色：#5D9199；
背景色：#A3E3ED；
}
.作为控制台包装{
最大高度：66px！重要；
}

嘿，谢谢！我想我快到了@丹泽格。你能给动画添加一个重置按钮吗？（在计数器组件之外的某个地方，它接受一个道具来重置。）我的应用程序基本上是一个进度条（这里是计数器），范围从0->100，在路由器更改时，它需要重置为0并返回到100。我正在将路由器更改标志传递到进度条（此处为计数器）。我想按钮重置应该是类似的。这就是我首先添加cancelAnimationFrame的原因。如果我是对的，我可能需要在返回逻辑上使用targetValueRef.current=0 cancelAnimationFrame（requestRef.current）。如果你看到这里，我让进度条工作。虽然，我不知道如何让路由器参与到这个游戏中。@NevinMadhukarK我已经更新了代码。只要使用
useffect
在相关属性发生更改时重置计数器即可。在本例中，我只是将位置（一个伪位置）传递给
计数器
组件。