Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/405.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/25.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 我是否需要清除react函数中的超时?_Javascript_Reactjs_React Hooks - Fatal编程技术网

Javascript 我是否需要清除react函数中的超时?

Javascript 我是否需要清除react函数中的超时?,javascript,reactjs,react-hooks,Javascript,Reactjs,React Hooks,我在一个函数中使用了“setTimout()”,而在“useffect()”中没有调用该函数。我还需要找到清除超时的方法吗 const RandomComponent = () =>{ const [clicked, setClicked] = useState(false); const aFunction = () => { setTimeout(()=>{ setClicked(true); },1000); } retu

我在一个函数中使用了“setTimout()”,而在“useffect()”中没有调用该函数。我还需要找到清除超时的方法吗

const RandomComponent = () =>{

  const [clicked, setClicked] = useState(false);

  const aFunction = () => {
    setTimeout(()=>{
      setClicked(true);
    },1000);
  }

  return (
    <div>
      <button onClick={aFunction}>Click me!</button>
    </div>  
  )

}

const RandomComponent=()=>{
const[clicked,setClicked]=useState(false);
常量函数=()=>{
设置超时(()=>{
setClicked(true);
},1000);
}
返回(
点击我!
)
}
类似于上面的代码,在这种情况下我需要清除超时吗?谢谢

*更新问题:

const RandomComponent = () =>{

  const [clicked, setClicked] = useState(false);

  const aFunction = (evt) => {
    return setTimeout(()=>{
      setClicked(true);
    },30000);
  }

  useEffect(()=>{
    return ()=>{
      // how to clear setTimeout in 'aFunction' when I unmount this component?
    }
  });

  return (
    <div>
      <button onClick={aFunction}>Click me!</button>
    </div>  
  )

}

const RandomComponent=()=>{
const[clicked,setClicked]=useState(false);
常量函数=(evt)=>{
返回setTimeout(()=>{
setClicked(true);
},30000);
}
useffect(()=>{
return()=>{
//卸载此组件时,如何清除'aFunction'中的setTimeout?
}
});
返回(
点击我!
)
}

如果希望计时器在尚未启动时不启动,则只需清除超时。如果它已经发射,或者你不在乎它将来是否发射,你不需要取消它

由于您是在单击按钮时启动计时器,如果计时器回调在运行时使用状态信息(问题中的一个没有),则它关闭的状态信息可能已过时,但如果需要,它可以通过setter函数获取新的状态信息。但是,如果在卸载组件后计时器可能会触发,那么像这样使用setter将导致更新未安装组件的状态时出错。很难给您一个通用的解决方案,因为通用的解决方案通常不如特定于您在计时器回调中所做的事情的解决方案好


在您询问的评论中:

如果在卸载组件时需要清除/清除函数中的setTimeout,我该如何做?因为如果我在useEffect中调用setTimeout,我可以将setTimeout放在变量中,将clearTimeout(setTimeout变量)放在useEffect中的返回函数中,但是如何在一个将被带有事件参数的onClick按钮调用的函数中执行呢

事实上,我不知道“正确”的反应方式,我想这样做

我知道一种方法,就是使用
useffect
和空的依赖项数组和非状态实例数据,如下所示:

// A utility function that cancels a timer callback if necessary and
// returns a 0 you can assign to the timer handler variable
function cancelTimer(handle) {
    if (handle) {
        clearTimer(handle);
    }
    return 0;
}

const Example = () => {
    // Non-state instance data
    const {current: instance} = useRef({});

    // Cleanup on dismount
    useEffect(() => {
        // Mounting
        // ...

        return () => {
            // Dismounting

            // If we have an outstanding timer, cancel it
            instance.timer = cancelTimer(instance.timer);
        };
    }, []); // <=== Empty array means the callback is only called on mount,
            //      and the one it returns is only called on dismount

    const onButtonClick = () => {
        instance.timer = cancelTimer(instance.timer);
        instance.timer setTimeout(() => {
            // ...
        }, 1000);
    };

    return (/*...*/);
};
//必要时取消计时器回调的实用函数,并且
//返回可以分配给计时器处理程序变量的0
函数取消计时器(句柄){
if(句柄){
清除计时器(手柄);
}
返回0;
}
常量示例=()=>{
//非状态实例数据
const{current:instance}=useRef({});
//下马清理
useffect(()=>{
//安装
// ...
return()=>{
//下马
//如果我们有一个未完成的计时器,请取消它
instance.timer=cancelTimer(instance.timer);
};
}, []); //  {
instance.timer=cancelTimer(instance.timer);
instance.timer setTimeout(()=>{
// ...
}, 1000);
};
返回(/*…*/);
};

如果调用
setInterval
,我们需要清除一个间隔。但是在
setTimeout
的情况下,我们不需要这样做,尽管如果组件被卸载,它会抱怨试图更新未安装组件的状态。@t.J.Crowder如果函数是setInterval而不是setTimeout,您会怎么建议。Javascript垃圾收集如何处理这种情况清理情况如何,我忘了在哪里见过它,但几周前我看到一篇文章说清理setTimeout或setInterval如果你使用它们,我是否需要清理在这种情况下,我不完全理解清理情况,我什么时候需要使用清理?(有效退货) thanks@ShubhamKhatri-垃圾收集实际上是一个次要问题,主要与
setInterval
有关。您好,很抱歉您的评论,是的,在我仔细阅读您的答案后,我现在就明白了,这是另一个快速问题,如果时间到了,我需要在卸载组件时清理/清除函数中的setTimeoutnt,我该怎么做?因为如果我在useEffect中调用setTimeout,我可以将setTimeout放在变量中,将clearTimeout(setTimeout变量)放在useEffect中的返回函数中,但是我该如何在一个用事件参数onClick按钮调用的函数中做呢?(我更新了我的问题,第一篇文章)