React Native setTimeout - 如何清除超时答案

【问题标题】：React Native setTimeout - How to clearTimeoutReact Native setTimeout - 如何清除超时
【发布时间】：2019-09-21 03:07:46
【问题描述】：

我在 useEffect 之外调用了 setTimeout，如何在屏幕卸载时清除 Timeout？

例如，我有一个带有这个的功能组件...

...

useEffect(() => {
  return () => clearTimeout(myTimeout)
}, [])

_getData = () => {
  fetch()
  .then(data => {
    let myTimeout = setTimeout(() => setSomething(!something), 5000)
  })
}

所以稍后在代码中的某个地方我调用 _getData() - 我不希望它在页面首次加载时使用 useEffect 运行，只有在采取某些操作时。获得数据后，我设置了超时。但是 useEffect 不知道这个超时。

我试过这样设置超时...

_getData... 
  setTimeoutVar(setTimeout(() => setSomething(!something), 5000))

useEffect...
 return () => clearTimeout(setTimeoutVar)

我尝试了其他一些奇怪的想法，但没有任何效果，我无法弄清楚这个。

想法？

【问题讨论】：

标签： react-native settimeout cleartimeout

【解决方案1】：

整天都在做这个 - 在 stackoverflow 上写一个问题，然后在两分钟内弄清楚。疯了！

这个问题的答案是将一个变量设置为false，然后在你取回数据时改变这个变量。然后有一个单独的 useEffect() 函数只处理这个。当变量更改时，它会运行。如果变量为真 - 设置超时并且 useEffect 函数返回 clearTimeout...

const [refresh, setRefresh] = useState(false)

useEffect(() => {
  let timeoutVariable

  if(refresh){
    timeoutVariable = setTimeout(() => setRefresh(false), 5000)
  }

  return () => clearTimeout(timeoutVariable)

}, [refresh]) 

_getData = () => {
  fetch()
  .then(data => {
    setRefresh(true)
  })
}

【讨论】：